import type { ImgHTMLAttributes, ReactNode, ReactElement } from "react";

export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "size"> {
  src?: string;
  alt?: string;
  size?: "sm" | "md" | "lg" | "xl";
  fallback?: ReactNode;
  initials?: string;
}

export function Avatar({
  src,
  alt = "User avatar",
  size = "md",
  fallback,
  initials,
  className = "",
  ...props
}: AvatarProps): ReactElement {
  const sizeStyles = {
    sm: "w-6 h-6 text-xs",
    md: "w-8 h-8 text-sm",
    lg: "w-12 h-12 text-base",
    xl: "w-16 h-16 text-xl",
  };

  const baseStyles =
    "rounded-full overflow-hidden flex items-center justify-center bg-gray-200 font-medium text-gray-600";

  const combinedClassName = [baseStyles, sizeStyles[size], className].filter(Boolean).join(" ");

  if (src) {
    return <img src={src} alt={alt} className={`${combinedClassName} object-cover`} {...props} />;
  }

  if (fallback) {
    return <div className={combinedClassName}>{fallback}</div>;
  }

  if (initials) {
    return <div className={combinedClassName}>{initials}</div>;
  }

  // Default fallback with user icon
  return (
    <div className={combinedClassName}>
      <svg
        className="w-1/2 h-1/2 text-gray-400"
        fill="currentColor"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
          clipRule="evenodd"
        />
      </svg>
    </div>
  );
}