Avatar

"use client";

import { useState } from "react";
import { User } from "lucide-react";

const sizeMap = {
  sm: { container: "w-8 h-8", text: "text-xs", icon: "w-4 h-4", status: "w-2.5 h-2.5 -bottom-0 -right-0" },
  md: { container: "w-10 h-10", text: "text-sm", icon: "w-5 h-5", status: "w-3 h-3 -bottom-0.5 -right-0.5" },
  lg: { container: "w-12 h-12", text: "text-base", icon: "w-6 h-6", status: "w-3.5 h-3.5 -bottom-0.5 -right-0.5" },
};

const statusColors = {
  online: "bg-green-500",
  offline: "bg-overlay/20",
  busy: "bg-red-500",
  away: "bg-amber-500",
};

function getInitials(name: string): string {
  return name.split(" ").map(w => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
}

export function DSAvatar({
  src, alt, name, size = "md", status,
}: {
  src?: string; alt?: string; name?: string;
  size?: "sm" | "md" | "lg";
  status?: "online" | "offline" | "busy" | "away";
}) {
  const [imgError, setImgError] = useState(false);
  const styles = sizeMap[size];
  const showImage = src && !imgError;
  const initials = name ? getInitials(name) : null;

  return (
    <div className="relative inline-flex" role="img" aria-label={alt || name || "Avatar"}>
      <div className={`${styles.container} rounded-full overflow-hidden flex items-center justify-center bg-surface border border-overlay/10`}>
        {showImage ? (
          <img src={src} alt={alt || name || "Avatar"} className="w-full h-full object-cover" onError={() => setImgError(true)} />
        ) : initials ? (
          <span className={`${styles.text} font-medium text-foreground select-none`}>{initials}</span>
        ) : (
          <User className={`${styles.icon} text-tertiary`} />
        )}
      </div>
      {status && <span className={`absolute ${styles.status} ${statusColors[status]} rounded-full border-2 border-background`} />}
    </div>
  );
}