import React from 'react';
import { cn } from '../../utils/cn';

export interface AvatarProps {
    src?: string;
    alt?: string;
    fallback?: string;
    size?: 'sm' | 'md' | 'lg';
    className?: string;
}

/**
 * Avatar - User avatar component
 * Part of Kōdō Design System
 */
export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
    ({ src, alt = 'Avatar', fallback, size = 'md', className }, ref) => {
        const sizeClasses = {
            sm: 'w-8 h-8 text-xs',
            md: 'w-10 h-10 text-sm',
            lg: 'w-12 h-12 text-base',
        };

        return (
            <div
                ref={ref}
                className={cn(
                    'rounded-full overflow-hidden bg-kodo-slate flex items-center justify-center',
                    sizeClasses[size],
                    className
                )}
            >
                {src ? (
                    <img src={src} alt={alt} className="w-full h-full object-cover" />
                ) : (
                    <span className="font-medium text-kodo-primary">
                        {fallback || alt.charAt(0).toUpperCase()}
                    </span>
                )}
            </div>
        );
    }
);

Avatar.displayName = 'Avatar';
