import { EQ_COLORS } from './eqComponents';

export default function ToggleSwitch({
  enabled,
  onClick,
}: {
  enabled: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className='relative h-6 w-11 cursor-pointer rounded-full transition-colors duration-300'
      style={{
        backgroundColor: enabled ? EQ_COLORS.primaryBlue : EQ_COLORS.toggleGray,
      }}
    >
      <div
        className='absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-300'
        style={{
          transform: enabled ? 'translateX(22px)' : 'translateX(2px)',
        }}
      />
    </button>
  );
}