'use client'

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

// Variant 5: Vertical Stack
export function AvatarStackVertical({ users, className }: AvatarStackProps) {
  return (
    <div className={cn('flex flex-col -space-y-2', className)}>
      {users.slice(0, 4).map((user, i) => (
        <motion.div
          key={user.id}
          initial={{ x: -20, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          transition={{ delay: i * 0.1 }}
          className="relative hover:z-10 hover:translate-x-2 transition-transform"
        >
          <Avatar src={user.image} alt={user.name} size={40} className="ring-2 ring-background shadow-md" />
        </motion.div>
      ))}
    </div>
  )
}