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

interface RadioCategoryProps<K extends string> {
    title: string;
    labels: Readonly<Record<K, string>>;
    values: Readonly<Record<K, boolean>>;
    onChange: (selectedKey: K | null) => void;
}

export function RadioCategory<K extends string>({
    title,
    labels,
    values,
    onChange,
}: RadioCategoryProps<K>) {
    const keys = Object.keys(labels) as K[];
    const selected = keys.find((k) => values[k]) ?? '';

    return (
        <Card className="gap-4 py-4">
            <CardHeader>
                <CardTitle className="text-sm">{title}</CardTitle>
            </CardHeader>
            <CardContent>
                <RadioGroup
                    value={selected}
                    onValueChange={(v) =>
                        onChange((v || null) as K | null)
                    }
                >
                    <div className="grid gap-2 sm:grid-cols-2">
                        {keys.map((key) => (
                            <div
                                key={key}
                                className="flex items-center gap-3 text-sm"
                            >
                                <RadioGroupItem
                                    value={key}
                                    id={`${title}-${key}`}
                                />
                                <Label htmlFor={`${title}-${key}`}>
                                    {labels[key]}
                                </Label>
                            </div>
                        ))}
                    </div>
                </RadioGroup>
            </CardContent>
        </Card>
    );
}