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

'use client';

import {Dispatch, SetStateAction} from 'react';

interface ToggleSwitchProps {
    enabled: boolean;
    setEnabled: Dispatch<SetStateAction<boolean>>;
    label?: string;
    description?: string;
    disabled?: boolean;
}

export default function ToggleSwitch({
    enabled,
    setEnabled,
    label,
    description,
    disabled = false
}: ToggleSwitchProps) {
    function handleToggle(): void {
        if (!disabled) {
            setEnabled(!enabled);
        }
    }

    return (
        <div className="flex items-center justify-between">
            <div className="flex flex-col">
                {label && (
                    <span className="text-text-primary font-medium">{label}</span>
                )}
                {description && (
                    <span className="text-text-secondary text-sm mt-1">{description}</span>
                )}
            </div>
            <button
                type="button"
                onClick={handleToggle}
                disabled={disabled}
                className={`
                    relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
                    transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
                    ${enabled ? 'bg-primary' : 'bg-secondary'}
                    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                `}
                role="switch"
                aria-checked={enabled}
            >
                <span
                    className={`
                        pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0
                        transition duration-200 ease-in-out
                        ${enabled ? 'translate-x-5' : 'translate-x-0'}
                    `}
                />
            </button>
        </div>
    );
}