"use client";

interface User {
  _id: string;
  name?: string;
  email?: string;
  avatar?: string;
  displayName?: string;
}

interface AvatarStackProps {
  users: User[];
  maxVisible?: number;
  size?: "xs" | "sm" | "md";
}

export function AvatarStack({ users, maxVisible = 3, size = "sm" }: AvatarStackProps) {
  if (!users || users.length === 0) {
    return null;
  }

  const visibleUsers = users.slice(0, maxVisible);
  const remainingCount = Math.max(0, users.length - maxVisible);

  const sizeClasses = {
    xs: "w-5 h-5 text-[10px]",
    sm: "w-6 h-6 text-xs",
    md: "w-8 h-8 text-sm",
  };

  const sizeClass = sizeClasses[size];

  return (
    <div className="flex items-center">
      {visibleUsers.map((user, index) => {
        const displayName = user.displayName || user.name || user.email || "?";
        const initial = displayName.charAt(0).toUpperCase();

        return (
          <div
            key={user._id}
            className="relative"
            style={{
              marginLeft: index > 0 ? "-8px" : "0",
              zIndex: visibleUsers.length - index,
            }}
            title={displayName}
          >
            {user.avatar ? (
              <img
                src={user.avatar}
                alt={displayName}
                className={`${sizeClass} rounded-full object-cover border-2 border-white dark:border-gray-800`}
              />
            ) : (
              <div
                className={`${sizeClass} rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center border-2 border-white dark:border-gray-800`}
              >
                <span className="text-white font-medium">{initial}</span>
              </div>
            )}
          </div>
        );
      })}

      {remainingCount > 0 && (
        <div
          className={`${sizeClass} rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center border-2 border-white dark:border-gray-800 text-gray-700 dark:text-gray-300 font-medium`}
          style={{
            marginLeft: "-8px",
            zIndex: 0,
          }}
          title={`+${remainingCount} more`}
        >
          +{remainingCount}
        </div>
      )}
    </div>
  );
}