import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

function initials(name: string): string {
  return name
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? '')
    .join('');
}

export function AssigneeStack({
  assignees,
  className,
}: {
  assignees: string[];
  className?: string;
}) {
  if (assignees.length === 0) {
    return <span className="text-muted-foreground text-sm">—</span>;
  }
  const visible = assignees.slice(0, 2);
  const overflow = assignees.length - visible.length;
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div className={cn('flex items-center', className)}>
          {visible.map((name, i) => (
            <span
              key={name}
              className={cn(
                'flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-medium ring-2 ring-background',
                i > 0 && '-ml-2',
              )}
            >
              {initials(name)}
            </span>
          ))}
          {overflow > 0 && (
            <span className="-ml-2 flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-medium ring-2 ring-background">
              +{overflow}
            </span>
          )}
        </div>
      </TooltipTrigger>
      <TooltipContent>{assignees.join(', ')}</TooltipContent>
    </Tooltip>
  );
}
