import { IconButton } from '@/components/ui/Button'
import type { IconName } from '@/components/ui/Icon'
import { cycleThemePref, useThemePref, type ThemePref } from '@/lib/theme'

const ICON: Record<ThemePref, IconName> = { system: 'monitor', light: 'sun', dark: 'moon' }

/** The nav's theme control: one button cycling system → light → dark. */
export function ThemeButton({ size, iconSize, className }: { size?: number; iconSize?: number; className?: string }) {
  const pref = useThemePref()
  return (
    <IconButton
      label={`Theme: ${pref}`}
      icon={ICON[pref]}
      iconSize={iconSize}
      size={size}
      className={className}
      onClick={cycleThemePref}
    />
  )
}