'use client'

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

// Variant 4: Add Button Stack
export function AvatarStackAdd({ users, className }: AvatarStackProps) {
  return (
    <div className={cn('flex items-center', className)}>
      <div className="flex -space-x-2 mr-3">
        {users.slice(0, 3).map((user) => (
          <Avatar key={user.id} src={user.image} alt={user.name} size={36} className="ring-2 ring-background" />
        ))}
      </div>
      <button className="flex items-center justify-center w-9 h-9 rounded-full border border-dashed border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary transition-colors">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 5v14M5 12h14" />
        </svg>
      </button>
    </div>
  )
}