'use client'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

interface Collaborator {
  id: string
  name: string | null
  email: string
  image: string | null
}

interface CollaboratorAvatarsProps {
  collaborators: Collaborator[]
  ownerId: string
  maxDisplay?: number
}

export function CollaboratorAvatars({ collaborators, ownerId, maxDisplay = 5 }: CollaboratorAvatarsProps) {
  if (collaborators.length === 0) return null

  const displayCollaborators = collaborators.slice(0, maxDisplay)
  const remainingCount = collaborators.length - maxDisplay

  return (
    <div className="flex items-center gap-1 mt-2">
      <TooltipProvider>
        {displayCollaborators.map((collaborator) => (
          <Tooltip key={collaborator.id}>
            <TooltipTrigger asChild>
              <div className="relative group">
                <Avatar className="h-6 w-6 border-2 border-background">
                  <AvatarImage src={collaborator.image || undefined} />
                  <AvatarFallback className="text-xs">
                    {collaborator.name?.charAt(0).toUpperCase() || collaborator.email.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                {collaborator.id === ownerId && (
                  <div className="absolute -bottom-1 -right-1">
                    <Badge variant="secondary" className="text-[8px] h-3 px-1 min-w-0">
                      Owner
                    </Badge>
                  </div>
                )}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p className="font-medium">{collaborator.name || 'Unnamed User'}</p>
              <p className="text-xs text-muted-foreground">{collaborator.email}</p>
            </TooltipContent>
          </Tooltip>
        ))}

        {remainingCount > 0 && (
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background">
                +{remainingCount}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p>{remainingCount} more collaborator{remainingCount > 1 ? 's' : ''}</p>
            </TooltipContent>
          </Tooltip>
        )}
      </TooltipProvider>
    </div>
  )
}