'use client';

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import type { ProfilUtiS } from '@/lib/api';
import { FONCTIONS_UTI_S } from '@/lib/utilisateurs';

type ProfilUtiSFormProps = {
  profil: ProfilUtiS;
  onChange: (profil: ProfilUtiS) => void;
  disabled?: boolean;
};

export function ProfilUtiSForm({
  profil,
  onChange,
  disabled = false,
}: ProfilUtiSFormProps) {
  function handleChange(key: keyof ProfilUtiS, checked: boolean) {
    onChange({
      ...profil,
      [key]: checked,
    });
  }

  return (
    <div className="space-y-3 rounded-lg border p-4">
      {FONCTIONS_UTI_S.map((fonction) => (
        <div key={fonction.key} className="flex items-start space-x-3">
          <Checkbox
            id={`profil-${fonction.key}`}
            checked={profil[fonction.key]}
            onCheckedChange={(checked) =>
              handleChange(fonction.key, checked === true)
            }
            disabled={disabled}
          />
          <div className="grid gap-1 leading-none">
            <Label
              htmlFor={`profil-${fonction.key}`}
              className="cursor-pointer font-medium"
            >
              {fonction.label}
            </Label>
            <p className="text-xs text-muted-foreground">
              {fonction.description}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}