'use client';

import { getAvatarOrInitials } from '../mock-data';

type AvatarProps = {
  avatar: string | null;
  name: string;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
};

export const Avatar = ({ avatar, name, size = 'md', className = '' }: AvatarProps) => {
  const sizeClasses = {
    sm: 'w-8 h-8 text-sm',
    md: 'w-10 h-10 lg:w-12 lg:h-12 text-lg lg:text-xl',
    lg: 'w-16 h-16 lg:w-20 lg:h-20 text-2xl lg:text-3xl'
  };

  const displayValue = getAvatarOrInitials(avatar, name);

  return (
    <div className={`bg-teal-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 ${sizeClasses[size]} ${className}`}>
      {displayValue}
    </div>
  );
};