function CheckIcon() {
  return (
    <svg
      width="12"
      height="12"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden
      className="text-neutral-10"
    >
      <path
        d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z"
        fill="currentColor"
      />
    </svg>
  );
}

export type FormCheckboxProps = {
  id?: string;
  checked: boolean;
  onChange: () => void;
  label: string;
  disabled?: boolean;
  labelClassName?: string;
};

export function FormCheckbox({
  id,
  checked,
  onChange,
  label,
  disabled = false,
  labelClassName = "text-neutral-100",
}: FormCheckboxProps) {
  return (
    <label
      htmlFor={id}
      className={`flex items-center gap-2 ${
        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
      }`}
    >
      <input
        id={id}
        type="checkbox"
        checked={checked}
        onChange={onChange}
        disabled={disabled}
        className="sr-only"
      />
      <span
        className={`flex size-4 shrink-0 items-center justify-center rounded border ${
          checked
            ? "border-primary-500 bg-primary-500"
            : "border-neutral-40 bg-neutral-10"
        }`}
        aria-hidden
      >
        {checked && <CheckIcon />}
      </span>
      <span className={`text-m-regular ${labelClassName}`}>{label}</span>
    </label>
  );
}