import { type ReactNode } from 'react';

import { cn } from '@/utils/classNames';

export interface ToggleSwitchProps {
  readonly checked: boolean;
  readonly onChange: (checked: boolean) => void;
  readonly label: ReactNode;
  readonly description?: ReactNode;
  readonly className?: string;
  readonly disabled?: boolean;
}

export function ToggleSwitch({
  checked,
  className,
  description,
  disabled = false,
  label,
  onChange
}: ToggleSwitchProps) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={cn(
        'interactive-ring flex w-full items-center justify-between gap-4 rounded-2xl border border-border/70 bg-surface/55 p-3 text-left transition duration-200 hover:border-accent/45 hover:bg-elevated/70 disabled:cursor-not-allowed disabled:opacity-50',
        checked && 'border-accent/45 bg-accent/10',
        className,
      )}
    >
      <span className="min-w-0">
        <span className="block text-sm font-semibold text-foreground">{label}</span>
        {description ? <span className="mt-1 block text-xs leading-5 text-muted">{description}</span> : null}
      </span>
      <span
        className={cn(
          'relative h-6 w-11 shrink-0 rounded-full border transition duration-200',
          checked ? 'border-accent/70 bg-accent/80' : 'border-border bg-elevated',
        )}
        aria-hidden="true"
      >
        <span
          className={cn(
            'absolute top-1/2 size-4 -translate-y-1/2 rounded-full bg-white shadow transition duration-200',
            checked ? 'left-[22px]' : 'left-1',
          )}
        />
      </span>
    </button>
  );
}