Avatar Group

'use client'

import { motion } from 'framer-motion'
import { User } from 'lucide-react'

const avatars = [
  { id: 1, name: 'John Doe', color: '#3B82F6' },
  { id: 2, name: 'Jane Smith', color: '#10B981' },
  { id: 3, name: 'Bob Johnson', color: '#F59E0B' },
  { id: 4, name: 'Alice Brown', color: '#EF4444' },
  { id: 5, name: 'Charlie Wilson', color: '#64748B' },
]

export function AvatarGroup() {
  return (
    <div className="flex items-center">
      <div className="flex -space-x-3">
        {avatars.map((avatar, index) => (
          <motion.div
            key={avatar.id}
            initial={{ x: -10 * index, opacity: 0, scale: 0.8 }}
            animate={{ x: 0, opacity: 1, scale: 1 }}
            transition={{
              delay: index * 0.1,
              type: 'spring',
              stiffness: 260,
              damping: 20,
            }}
            whileHover={{
              scale: 1.2,
              zIndex: 10,
              transition: { duration: 0.2 },
            }}
            className="relative"
            style={{ zIndex: avatars.length - index }}
          >
            <div
              className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--card-bg)] shadow-md"
              style={{ backgroundColor: avatar.color }}
            >
              <User className="h-5 w-5 text-white" />
            </div>
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileHover={{ opacity: 1, y: 0 }}
              className="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-[var(--card-bg)] px-3 py-1 text-xs shadow-lg"
            >
              {avatar.name}
            </motion.div>
          </motion.div>
        ))}
      </div>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: avatars.length * 0.1 }}
        className="ml-2 text-sm text-[var(--foreground)]/70"
      >
        +{avatars.length} members
      </motion.div>
    </div>
  )
}