'use client';

import React from 'react';

interface AvatarStackProps {
    names: string[];
    limit?: number;
    size?: 'sm' | 'md';
}

export default function AvatarStack({ names, limit = 3, size = 'sm' }: AvatarStackProps) {
    if (!names || names.length === 0) return null;

    const visibleNames = names.slice(0, limit);
    const extraCount = names.length - limit;

    const sizeClasses = size === 'sm' ? 'w-6 h-6 text-[10px]' : 'w-8 h-8 text-xs';

    const getInitials = (name: string) => {
        return name
            .split(' ')
            .map(n => n[0])
            .slice(0, 2)
            .join('')
            .toUpperCase();
    };

    return (
        <div className="flex items-center -space-x-2">
            {visibleNames.map((name, i) => (
                <div
                    key={`${name}-${i}`}
                    className={`${sizeClasses} rounded-full bg-orange-900/30 border-2 border-zinc-950 flex items-center justify-center text-orange-400 font-bold ring-1 ring-orange-500/10 shadow-sm relative group`}
                    title={name}
                >
                    {getInitials(name)}
                    {/* Tooltip on hover */}
                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                        {name}
                    </div>
                </div>
            ))}
            {extraCount > 0 && (
                <div
                    className={`${sizeClasses} rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-zinc-500 dark:text-zinc-400 font-black ring-1 ring-zinc-500/10 shadow-sm relative group`}
                    title={`${extraCount} weitere Personen`}
                >
                    +{extraCount}
                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                        {names.slice(limit).join(', ')}
                    </div>
                </div>
            )}
        </div>
    );
}