import { usePage } from "@inertiajs/react";
import { type ReactNode } from "react";

import InputError from "@/back/Components/InputError";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

interface SimpleSwitchProps {
  id?: string;
  name: string;
  checked?: boolean;
  label?: ReactNode | string;
  leftHelper?: string;
  rightHelper?: string;
  className?: string;
  required?: boolean;
  disabled?: boolean;
  parentErrors?: Record<string, string> | null;
  setData: (name: string, value: boolean) => void;
}

export default function SimpleSwitch({
  name,
  id = name,
  checked,
  label,
  leftHelper,
  rightHelper,
  className = "",
  required = false,
  disabled = false,
  parentErrors = null,
  setData,
}: Readonly<SimpleSwitchProps>) {
  const { errors } = usePage().props;
  const localErrors = parentErrors ?? errors;

  return (
    <div className={`flex flex-col items-start w-fit gap-1.5 ${className}`}>
      {label && (
        <Label htmlFor={name} className="font-bold flex items-center gap-1.5">
          {label}
          {required && " *"}
        </Label>
      )}
      <div className="flex items-center gap-3">
        {leftHelper && <small>{leftHelper}</small>}
        <Switch
          id={id}
          name={name}
          onCheckedChange={(value) => {
            setData(name, value);
          }}
          required={required}
          checked={checked}
          disabled={disabled}
          className={cn({
            "border-destructive/50": localErrors[name],
          })}
        />
        {rightHelper && <small>{rightHelper}</small>}
      </div>
      <InputError message={localErrors[name]} />
    </div>
  );
}