ldc-groupe/resources/ts/back/Components/Inputs/SimpleSwitch.tsx

// * Packages
import { usePage } from "@inertiajs/react";
// * Components shadcn
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
// * Other
import InputError from "@/back/Components/InputError";
import { cn } from "@/lib/utils";

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

export default function SimpleSwitch({
    name,
    checked,
    label,
    leftHelper,
    rightHelper,
    className = "",
    required = false,
    disabled = false,
    parentErrors = null,
    setData,
}: 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}>{label + (required ? " *" : "")}</Label>
            )}
            <div className="flex items-center gap-3">
                {leftHelper && <small>{leftHelper}</small>}
                <Switch
                    id={name}
                    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>
    );
}