import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

interface EnumRadioCardProps<K extends string> {
    title: string;
    labels: Readonly<Record<K, string>>;
    value: K | null;
    onChange: (value: K | null) => void;
    required?: boolean;
}

export function EnumRadioCard<K extends string>({
    title,
    labels,
    value,
    onChange,
    required,
}: EnumRadioCardProps<K>) {
    const keys = Object.keys(labels) as K[];

    return (
        <Card className="gap-4 py-4">
            <CardHeader>
                <CardTitle className="text-sm">
                    {title}
                    {required && (
                        <span className="ml-0.5 text-destructive">*</span>
                    )}
                </CardTitle>
            </CardHeader>
            <CardContent>
                <RadioGroup
                    value={value ?? ''}
                    onValueChange={(next) => onChange((next || null) as K | null)}
                >
                    <div className="grid gap-2 sm:grid-cols-2">
                        {keys.map((key) => {
                            const id = `${title}-${key}`;

                            return (
                                <div
                                    key={key}
                                    className="flex items-center gap-3 text-sm"
                                >
                                    <RadioGroupItem value={key} id={id} />
                                    <Label htmlFor={id}>{labels[key]}</Label>
                                </div>
                            );
                        })}
                    </div>
                </RadioGroup>
            </CardContent>
        </Card>
    );
}