import { useState } from "react";

// paleta pra gerar o avatar de iniciais quando não há logo cadastrada
const INITIALS_PALETTE = [
    'bg-rose-500', 'bg-orange-500', 'bg-amber-500', 'bg-lime-500',
    'bg-emerald-500', 'bg-teal-500', 'bg-cyan-500', 'bg-blue-500',
    'bg-indigo-500', 'bg-violet-500', 'bg-fuchsia-500', 'bg-pink-500',
];

function initialsColor(name: string) {
    let hash = 0;
    for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
    return INITIALS_PALETTE[hash % INITIALS_PALETTE.length];
}

export function EnterpriseLogo({ src, alt }: { src?: string | null; alt: string }) {
    const [failed, setFailed] = useState(false);

    if (!src || failed) {
        const letter = alt?.trim()?.[0]?.toUpperCase() || '?';
        return (
            <div className={`w-full h-full flex items-center justify-center ${initialsColor(alt || '?')}`}>
                <span className="text-white text-xl font-bold select-none">{letter}</span>
            </div>
        );
    }

    return (
        <img
            src={src}
            alt={alt}
            className="w-full h-full object-contain p-2"
            onError={() => setFailed(true)}
        />
    );
}