import { FormCheckbox } from "./form-checkbox";

export type FormCheckboxOption = {
  value: string;
  label: string;
};

export type FormCheckboxGroupProps = {
  label: string;
  options: FormCheckboxOption[];
  values: string[];
  onChange: (values: string[]) => void;
  disabled?: boolean;
};

export function FormCheckboxGroup({
  label,
  options,
  values,
  onChange,
  disabled,
}: FormCheckboxGroupProps) {
  function toggleOption(optionValue: string) {
    if (disabled) return;

    if (values.includes(optionValue)) {
      onChange(values.filter((item) => item !== optionValue));
      return;
    }

    onChange([...values, optionValue]);
  }

  return (
    <div className="flex flex-col gap-2">
      <p className="text-m-medium text-neutral-100">{label}</p>
      <div className="flex flex-col gap-3">
        {options.map((option) => (
          <FormCheckbox
            key={option.value}
            checked={values.includes(option.value)}
            onChange={() => toggleOption(option.value)}
            disabled={disabled}
            label={option.label}
          />
        ))}
      </div>
    </div>
  );
}