'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 AvatarStackCascade({ users, max = 6, className, size = 44 }: AvatarStackProps) {
  return (
    <div className={cn('flex items-end gap-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"
          style={{ transform: `translateY(${(i % 3) * 6}px)` }}
        >
          <Avatar className="ring-2 ring-background" 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>
  )
}