import { Checkbox } from "@/components/ui/checkbox";
import { usePage } from "@inertiajs/react";
import { ReactNode } from "react";
import InputError from "$/base/InputError";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

type SimpleCheckboxProps = {
  className?: string;
  name: string;
  label: ReactNode | string;
  value?: boolean;
  id?: string;
  disabled?: boolean;
  parentErrors?: Record<string, string> | null;
  // eslint-disable-next-line no-unused-vars
  setData: (name: string, value: boolean) => void;
};

export default function SimpleCheckbox({
  className,
  value = false,
  name,
  label,
  id = name,
  disabled = false,
  parentErrors = null,
  setData,
}: SimpleCheckboxProps) {
  const { errors } = usePage().props;
  const localErrors = parentErrors ?? errors;
  return (
    <div className={cn(className)}>
      <div className="flex items-start gap-4">
        <Checkbox
          id={id}
          disabled={disabled}
          className="rounded-full border-primary-foreground data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary"
          checked={value}
          onCheckedChange={(v) => {
            setData(name, Boolean(v));
          }}
        />
        <Label htmlFor={id} className="text-start font-normal">
          {label}
        </Label>
      </div>
      <InputError message={localErrors[name]} />
    </div>
  );
}