"use client";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { UserCircle } from "lucide-react";

interface Assignee {
  id: string;
  name: string;
  avatar?: string;
}

interface AvatarGroupProps {
  assignees: Assignee[];
  max?: number;
  size?: "sm" | "md";
  className?: string;
}

export function AvatarGroup({
  assignees,
  max = 3,
  size = "md",
  className,
}: AvatarGroupProps) {
  const visibleAssignees = assignees.slice(0, max);
  const overflowCount = assignees.length - max;
  const hasOverflow = overflowCount > 0;

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

  return (
    <div className={cn("flex flex-row-reverse items-center ", className)}>
      {visibleAssignees.map((assignee, index) => (
        <Tooltip key={assignee.id}>
          <TooltipTrigger asChild>
            <Avatar
              className={cn(
                "border-2 border-background",
                sizeClasses[size],
                index !== 0 && "-me-2",
              )}
            >
              {assignee.avatar && (
                <AvatarImage src={assignee.avatar} alt={assignee.name} />
              )}
              <AvatarFallback />
            </Avatar>
          </TooltipTrigger>
          <TooltipContent>
            <p>{assignee.name}</p>
          </TooltipContent>
        </Tooltip>
      ))}
      {hasOverflow && (
        <Tooltip>
          <TooltipTrigger asChild>
            <div
              className={cn(
                "bg-muted text-muted-foreground flex shrink-0 items-center justify-center rounded-full border-2 border-background font-medium -me-2 z-1",
                sizeClasses[size],
              )}
            >
              +{overflowCount}
            </div>
          </TooltipTrigger>
          <TooltipContent>
            <div className="space-y-1">
              {assignees.slice(max).map((assignee) => (
                <div key={assignee.id} className="text-xs">
                  {assignee.name}
                </div>
              ))}
            </div>
          </TooltipContent>
        </Tooltip>
      )}
    </div>
  );
}