ERitors-Scribe-Desktop/components/form/CheckBox.tsx

import {Dispatch, SetStateAction} from "react";

interface CheckBoxProps {
    isChecked: boolean;
    setIsChecked: Dispatch<SetStateAction<boolean>>;
    label: string;
    description: string;
    id: string;
}

export default function CheckBox(
    {
        isChecked,
        setIsChecked,
        label,
        description,
        id,
    }: CheckBoxProps) {
    return (
        <div className="flex items-center group">
            <div className="relative inline-block w-12 mr-3 align-middle select-none">
                <input
                    type="checkbox"
                    id={id}
                    checked={isChecked}
                    onChange={() => setIsChecked(!isChecked)}
                    className="hidden"
                />
                <label htmlFor={id}
                       className={`block overflow-hidden h-6 rounded-full cursor-pointer transition-all duration-200 border-2 shadow-sm hover:shadow-md ${
                           isChecked
                               ? 'bg-primary border-primary shadow-primary/30'
                               : 'bg-secondary/50 border-secondary hover:bg-secondary'
                       }`}
                >
                    <span
                        className={`absolute block h-5 w-5 rounded-full bg-white shadow-md transform transition-all duration-200 top-0.5 ${
                            isChecked ? 'right-0.5 scale-110' : 'left-0.5'
                        }`}/>
                </label>
            </div>
            <div className="flex-1">
                <label htmlFor={id}
                       className="text-text-primary text-sm font-medium cursor-pointer group-hover:text-primary transition-colors">
                    {label}
                </label>
                <p className="text-text-secondary text-xs mt-0.5 hidden md:block">
                    {description}
                </p>
            </div>
        </div>
    )
}