nuzlocke-tracker/frontend/src/components/RuleToggle.tsx

import { useState } from 'react'

interface RuleToggleProps {
  name: string
  description: string
  enabled: boolean
  onChange: (enabled: boolean) => void
}

export function RuleToggle({ name, description, enabled, onChange }: RuleToggleProps) {
  const [showTooltip, setShowTooltip] = useState(false)

  return (
    <div className="flex items-center justify-between py-3 border-b border-border-default last:border-0">
      <div className="flex-1 pr-4">
        <div className="flex items-center gap-2">
          <span className="font-medium text-text-primary">{name}</span>
          <button
            type="button"
            className="text-gray-400 hover:text-text-secondary"
            onMouseEnter={() => setShowTooltip(true)}
            onMouseLeave={() => setShowTooltip(false)}
            onClick={() => setShowTooltip(!showTooltip)}
            aria-label={`Info about ${name}`}
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </button>
        </div>
        {showTooltip && <p className="mt-1 text-sm text-text-tertiary">{description}</p>}
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={enabled}
        onClick={() => onChange(!enabled)}
        className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 ${
          enabled ? 'bg-blue-600' : 'bg-surface-3'
        }`}
      >
        <span
          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
            enabled ? 'translate-x-5' : 'translate-x-0'
          }`}
        />
      </button>
    </div>
  )
}