'use client';

const Switch = ({
  checked = false,
  onChange,
  label,
  description,
  disabled = false,
}) => {
  return (
    <div
      className={`flex items-center justify-between gap-4 px-4 py-3 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
    >
      <div className="flex flex-col gap-0.5 min-w-0">
        {label && (
          <span className="text-[13px] font-medium text-neutral-900 dark:text-white select-none">{label}</span>
        )}
        {description && (
          <span className="text-[11px] text-neutral-500 dark:text-neutral-400 select-none">{description}</span>
        )}
      </div>

      <button
        type="button"
        role="switch"
        aria-checked={checked}
        disabled={disabled}
        onClick={() => !disabled && onChange?.(!checked)}
        className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 border ${
          checked
            ? 'bg-blue-700 border-blue-800'
            : 'bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-600'
        } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
      >
        <span
          className={`absolute top-1/2 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${
            checked ? 'translate-x-5 -translate-y-1/2' : 'translate-x-0 -translate-y-1/2'
          }`}
        />
      </button>
    </div>
  );
};

export default Switch;
