'use client'

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

// Variant 2: Glassmorphic Spread Stack
export function AvatarStackGlass({ users, max = 5, className, size = 48 }: AvatarStackProps) {
  return (
    <div className={cn('flex items-center -space-x-4 p-2', className)}>
      {users.slice(0, max).map((user, i) => (
        <motion.div
          key={user.id}
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: i * 0.05 }}
          className="relative z-10 hover:z-20 transition-all duration-300 hover:-translate-y-2"
        >
          <div className="relative rounded-full p-[2px] bg-gradient-to-b from-white/20 to-white/5 backdrop-blur-md border border-white/10 shadow-lg">
            <Avatar src={user.image} alt={user.name} size={size} className="border-none" />
          </div>
        </motion.div>
      ))}
    </div>
  )
}