import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import type { BrandingFontOption } from '@/types/branding';

const CATEGORY_ORDER: BrandingFontOption['category'][] = [
    'sans',
    'serif',
    'display',
    'mono',
];

type FontSelectProps = {
    id: string;
    name: string;
    value: string;
    fonts: BrandingFontOption[];
    onValueChange: (fontKey: string) => void;
};

export default function FontSelect({
    id,
    name,
    value,
    fonts,
    onValueChange,
}: FontSelectProps) {
    return (
        <Select name={name} value={value} onValueChange={onValueChange}>
            <SelectTrigger id={id} className="w-full">
                <SelectValue />
            </SelectTrigger>
            <SelectContent>
                {CATEGORY_ORDER.map((category) => {
                    const fontsInCategory = fonts.filter(
                        (font) => font.category === category,
                    );

                    if (fontsInCategory.length === 0) {
                        return null;
                    }

                    return (
                        <SelectGroup key={category}>
                            <SelectLabel className="capitalize">
                                {category}
                            </SelectLabel>
                            {fontsInCategory.map((font) => (
                                <SelectItem
                                    key={font.key}
                                    value={font.key}
                                    style={{ fontFamily: `'${font.family}'` }}
                                >
                                    {font.family}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    );
                })}
            </SelectContent>
        </Select>
    );
}