type SwitchProps = {
    checked: boolean;
    onChange: (checked: boolean) => void;
    ariaLabel: string;
    disabled?: boolean;
};

export function Switch({ checked, onChange, ariaLabel, disabled = false }: SwitchProps) {
    return (
        <button
            type="button"
            role="switch"
            aria-checked={checked}
            aria-label={ariaLabel}
            disabled={disabled}
            onClick={() => onChange(!checked)}
            className={[
                'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors',
                'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none',
                checked ? 'bg-primary' : 'bg-border',
                disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
            ].join(' ')}
        >
            <span
                className={[
                    'inline-block h-5 w-5 transform rounded-full bg-card shadow transition-transform',
                    checked ? 'translate-x-5' : 'translate-x-0.5',
                ].join(' ')}
            />
        </button>
    );
}