'use client'

import React from 'react'
import { motion } from 'framer-motion'
import { cn } from '@/lib/utils'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'

interface User {
  id: string
  name: string
  image?: string
}

export interface AvatarStackProps {
  users: User[]
  max?: number
  className?: string
  size?: number
}

export function AvatarStackRing({ users, max = 5, className, size = 48 }: AvatarStackProps) {
  return (
    <div className={cn('flex items-center -space-x-4', className)}>
      {users.slice(0, max).map((user, i) => (
        <motion.div
          key={user.id}
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: i * 0.06 }}
          className="relative z-10 hover:z-20"
        >
          <Avatar
            className={cn('ring-2 ring-background shadow-sm hover:ring-primary/50 transition-all')}
            style={{ width: size, height: size }}
          >
            <AvatarImage src={user.image} alt={user.name} className="object-cover" />
            <AvatarFallback className="bg-muted text-[10px] font-bold uppercase">
              {user.name.slice(0, 2)}
            </AvatarFallback>
          </Avatar>
        </motion.div>
      ))}
    </div>
  )
}