import React from 'react';

interface AvatarProps {
  src?: string;
  firstName?: string;
  lastName?: string;
  className?: string;
}

const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];

export const Avatar: React.FC<AvatarProps> = ({ firstName = '', lastName = '', className = "w-full h-full" }) => {
  const getFallback = () => {
    const initials = `${firstName?.[0] || ''}${lastName?.[0] || ''}`.toUpperCase();
    const colorIndex = Math.abs((firstName?.charCodeAt(0) || 0) + (lastName?.charCodeAt(0) || 0)) % colors.length;
    const color = colors[colorIndex];
    
    return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='${encodeURIComponent(color)}'/%3E%3Ctext x='50%25' y='50%25' dy='.1em' fill='white' font-size='40' font-family='sans-serif' text-anchor='middle' dominant-baseline='middle'%3E${initials}%3C/text%3E%3C/svg%3E`;
  };

  return (
    <img 
      src={getFallback()} 
      alt={`${firstName} ${lastName}`} 
      className={`${className} object-cover`} 
    />
  );
};
