import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';

interface CheckboxCategoryProps<K extends string> {
    title: string;
    labels: Readonly<Record<K, string>>;
    values: Readonly<Record<K, boolean>>;
    onChange: (key: K, value: boolean) => void;
    children?: React.ReactNode;
}

export function CheckboxCategory<K extends string>({
    title,
    labels,
    values,
    onChange,
    children,
}: CheckboxCategoryProps<K>) {
    const keys = Object.keys(labels) as K[];

    return (
        <Card className="gap-4 py-4">
            <CardHeader>
                <CardTitle className="text-sm">{title}</CardTitle>
            </CardHeader>
            <CardContent className="flex flex-col gap-3">
                <div className="grid gap-2 sm:grid-cols-2">
                    {keys.map((key) => (
                        <label
                            key={key}
                            className="flex items-center gap-3 text-sm"
                        >
                            <Checkbox
                                checked={values[key]}
                                onCheckedChange={(v) =>
                                    onChange(key, v === true)
                                }
                            />
                            {labels[key]}
                        </label>
                    ))}
                </div>
                {children}
            </CardContent>
        </Card>
    );
}