'use client'
import React from "react";

interface ToggleSwitchProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
    size?: 'sm' | 'md';
}

export default function ToggleSwitch({checked, onChange, disabled = false, size = 'md'}: ToggleSwitchProps) {
    const trackClass: string = size === 'sm' ? 'h-4 w-7' : 'h-6 w-11';
    const thumbClass: string = size === 'sm' ? 'h-2.5 w-2.5' : 'h-4 w-4';
    const translateClass: string = size === 'sm'
        ? (checked ? 'translate-x-3.5' : 'translate-x-0.5')
        : (checked ? 'translate-x-6' : 'translate-x-1');

    return (
        <button
            type="button"
            role="switch"
            aria-checked={checked}
            disabled={disabled}
            onClick={(): void => onChange(!checked)}
            className={`relative inline-flex ${trackClass} items-center rounded-full transition-colors duration-200 ${
                checked ? 'bg-primary' : 'bg-secondary'
            } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
        >
            <span
                className={`inline-block ${thumbClass} transform rounded-full bg-text-primary transition-transform duration-200 ${translateClass}`}
            />
        </button>
    );
}