import type { LucideIcon } from "lucide-react";

type Accent = "indigo" | "blue" | "cyan" | "violet";

const accentMap: Record<Accent, string> = {
    indigo: "text-indigo-300 bg-indigo-500/10 border-indigo-500/20",
    blue: "text-blue-300 bg-blue-500/10 border-blue-500/20",
    cyan: "text-cyan-300 bg-cyan-500/10 border-cyan-500/20",
    violet: "text-violet-300 bg-violet-500/10 border-violet-500/20",
};

export function SectionHeader ( {
    title,
    subtitle,
    icon: Icon,
    accent = "indigo",
    className = "",
}: {
    title: string;
    subtitle?: string;
    icon?: LucideIcon;
    accent?: Accent;
    className?: string;
} ) {
    return (
        <div className={ `mb-6 flex items-start gap-4 ${ className }` }>
            { Icon && (
                <div className={ `rounded-2xl border p-3 ${ accentMap[ accent ] }` }>
                    <Icon className="h-5 w-5" />
                </div>
            ) }
            <div>
                <h3 className="text-xl font-bold text-white">{ title }</h3>
                { subtitle && <p className="mt-1 text-sm text-slate-400">{ subtitle }</p> }
            </div>
        </div>
    );
}

export function FieldHeader ( {
    title,
    subtitle,
    accent = "indigo",
    rightSlot,
}: {
    title: string;
    subtitle?: string;
    accent?: Accent;
    rightSlot?: React.ReactNode;
} ) {
    return (
        <div className="mb-3 flex items-center justify-between gap-3">
            <div>
                <div className={ `text-sm font-semibold ${ accentMap[ accent ].split( " " )[ 0 ] }` }>
                    { title }
                </div>
                { subtitle && <div className="text-xs text-slate-400">{ subtitle }</div> }
            </div>
            { rightSlot }
        </div>
    );
}