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 = "",
  style,
  ...props
}: AvatarProps): ReactElement {
  type AvatarSize = "sm" | "md" | "lg" | "xl";
  const sizeStyles: Record<AvatarSize, string> = {
    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 baseClass = `rounded-full overflow-hidden flex items-center justify-center font-medium ${sizeStyles[size]} ${className}`;

  const gradientStyle: React.CSSProperties = {
    background: "linear-gradient(135deg, var(--ms-blue-500), var(--ms-purple-500))",
    color: "#fff",
    ...style,
  };

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

  if (fallback) {
    return (
      <div className={baseClass} style={gradientStyle}>
        {fallback}
      </div>
    );
  }

  if (initials) {
    return (
      <div className={baseClass} style={gradientStyle}>
        {initials}
      </div>
    );
  }

  // Default fallback with user icon
  return (
    <div className={baseClass} style={gradientStyle}>
      <svg className="w-1/2 h-1/2" 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>
  );
}
