'use client'

export interface ToggleFieldProps {
  label: string
  value?: boolean
  onChange: (value: boolean) => void
  helpText?: string
}

export function ToggleField({ label, value = false, onChange, helpText }: ToggleFieldProps) {
  return (
    <div className="flex items-center justify-between">
      <div>
        <span className="text-sm font-medium">{label}</span>
        {helpText && <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p>}
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={value}
        onClick={() => onChange(!value)}
        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
          value ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'
        }`}
      >
        <span
          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
            value ? 'translate-x-5' : 'translate-x-0'
          }`}
        />
      </button>
    </div>
  )
}
