import React from 'react';
interface ToggleProps {
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
className?: string;
label?: string;
}
const Toggle: React.FC<ToggleProps> = ({
checked,
onChange,
disabled = false,
className = '',
label
}) => {
return (
<div className={`flex items-center ${className}`}>
<button
type="button"
role="switch"
aria-checked={checked}
disabled={disabled}
onClick={() => !disabled && onChange(!checked)}
className={`
relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
${checked ? 'bg-blue-600' : 'bg-gray-200'}
${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
`}
>
<span
className={`
inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ease-in-out
${checked ? 'translate-x-6' : 'translate-x-1'}
`}
/>
</button>
{label && (
<span className="ml-3 text-sm font-medium text-gray-700">{label}</span>
)}
</div>
);
};
export default Toggle;
