'use client'

import React from 'react'
import { cn } from '@/lib/utils'
import { Avatar, AvatarStackProps } from './avatar'

// Variant 3: Tooltip Stack
export function AvatarStackTooltip({ users, max = 3, className }: AvatarStackProps) {
  return (
    <div className={cn('flex items-center gap-1', className)}>
      {users.slice(0, max).map((user) => (
        <div key={user.id} className="relative group">
          <Avatar src={user.image} alt={user.name} size={32} className="cursor-pointer hover:ring-2 ring-primary transition-all" />
          <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-black text-white text-xs py-1 px-2 rounded pointer-events-none whitespace-nowrap">
            {user.name}
            <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black" />
          </div>
        </div>
      ))}
      <div className="text-xs text-muted-foreground ml-2">
        and {users.length - max} others
      </div>
    </div>
  )
}