import styles from './TopBar.module.css'

interface AutoRefreshToggleProps {
  active: boolean
  onChange: (active: boolean) => void
  className?: string
}

export function AutoRefreshToggle({ active, onChange, className }: AutoRefreshToggleProps) {
  return (
    <button
      className={`${styles.liveToggle} ${active ? styles.liveToggleActive : ''} ${className ?? ''}`}
      onClick={() => onChange(!active)}
      type="button"
      aria-label={active ? 'Disable auto-refresh' : 'Enable auto-refresh'}
      title={active ? 'Auto-refresh is on — click to pause' : 'Auto-refresh is paused — click to resume'}
    >
      <span className={styles.liveDot} />
      {active ? 'AUTO' : 'MANUAL'}
    </button>
  )
}
