import React from 'react';

interface AvatarProps {
  name: string;
  src?: string | null;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  style?: React.CSSProperties;
}

const sizes: Record<string, string> = {
  sm: 'w-6 h-6 text-[10px]',
  md: 'w-8 h-8 text-xs',
  lg: 'w-10 h-10 text-sm',
};

export function Avatar({ name, src, size = 'md', className = '', style = {} }: AvatarProps) {
  const initials = name
    .split(' ')
    .map(n => n[0])
    .filter(Boolean)
    .slice(0, 2)
    .join('')
    .toUpperCase();

  const base = [
    'rounded-full flex items-center justify-center font-semibold shrink-0',
    sizes[size] ?? sizes.md,
    className,
  ].join(' ');

  if (src) {
    return (
      <img
        src={src}
        alt={name}
        className={base}
        style={{ objectFit: 'cover', ...style }}
      />
    );
  }

  return (
    <div
      className={base}
      style={{
        background: 'rgba(99,102,241,0.20)',
        color: '#A5B4FC',
        border: '1px solid rgba(99,102,241,0.25)',
        ...style,
      }}
      title={name}
    >
      {initials}
    </div>
  );
}