'use client'

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

// Variant 1: Standard Stack with Expansion
export function AvatarStack({ users, max = 4, className, size = 40 }: AvatarStackProps) {
  const displayUsers = users.slice(0, max)
  const remaining = users.length - max

  return (
    <div className={cn('flex items-center -space-x-3 hover:space-x-1 transition-all duration-300', className)}>
      {displayUsers.map((user, i) => (
        <motion.div
          key={user.id}
          initial={{ opacity: 0, scale: 0.5, x: -20 }}
          animate={{ opacity: 1, scale: 1, x: 0 }}
          transition={{ delay: i * 0.1 }}
          className="relative group cursor-pointer z-10 hover:z-20 hover:scale-110 transition-transform"
        >
          <Avatar src={user.image} alt={user.name} size={size} className="ring-2 ring-background shadow-sm" />
          <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-popover text-popover-foreground text-[10px] px-2 py-1 rounded shadow-lg whitespace-nowrap pointer-events-none z-50">
            {user.name}
          </div>
        </motion.div>
      ))}
      {remaining > 0 && (
        <div
          className="relative z-0 flex items-center justify-center rounded-full bg-muted text-muted-foreground text-xs font-medium ring-2 ring-background hover:bg-muted/80 transition-colors cursor-pointer"
          style={{ width: size, height: size }}
        >
          +{remaining}
        </div>
      )}
    </div>
  )
}