import React from "react";
import Image from "next/image";

const FALLBACK_AVATAR = "/assets/images/avatar-dummy.png";

const AVATAR_COLORS = [
  "#2563eb",
  "#7c3aed",
  "#b45309",
  "#c2410c",
  "#0f766e",
  "#1d4ed8",
  "#0891b2",
  "#059669",
  "#be185d",
  "#4f46e5",
];

const getAvatarColor = (name: string) => {
  const code = name.charCodeAt(0) || 0;
  return AVATAR_COLORS[code % AVATAR_COLORS.length];
};

const getInitials = (name: string) => {
  const parts = name.trim().split(/\s+/);
  return (
    (parts[0]?.[0] ?? "") +
    (parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "")
  ).toUpperCase() || "U";
};

interface AvatarProps {
  src?: string | null;
  name: string;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "blog-sm" | "blog-md";
}

export const Avatar: React.FC<AvatarProps> = ({ src, name, size = "md" }) => {
  let sizeClass = "";
  if (size === "xs") {
    sizeClass = "w-6 h-6 text-[10px]";
  } else if (size === "sm") {
    sizeClass = "w-7 h-7 text-[11px]";
  } else if (size === "md") {
    sizeClass = "w-9 h-9 text-[13px]";
  } else if (size === "blog-sm") {
    sizeClass = "w-9.5 h-9.5 text-[13px]";
  } else if (size === "blog-md" || size === "lg") {
    sizeClass = "w-12 h-12 text-base";
  } else if (size === "2xl") {
    sizeClass = "w-16 h-16 text-xl";
  } else if (size === "xl") {
    sizeClass = "w-20 h-20 text-2xl";
  }

  const hasRealAvatar = src && src !== FALLBACK_AVATAR;
  if (hasRealAvatar) {
    return (
      <div
        className={`relative rounded-full overflow-hidden shrink-0 border border-[#e5e7eb] ${sizeClass}`}
      >
        <Image src={src} alt={name} fill className="object-cover" />
      </div>
    );
  }
  return (
    <div
      className={`rounded-full shrink-0 flex items-center justify-center text-white font-bold border border-[#e5e7eb] ${sizeClass}`}
      style={{ backgroundColor: getAvatarColor(name) }}
    >
      {getInitials(name)}
    </div>
  );
};

export default Avatar;