import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { Monitor, Moon, Sun } from 'lucide-react'
import type { ThemeModePreference } from '@/shared/model/theme'

type Props = {
  mode: ThemeModePreference
  resolvedMode: 'light' | 'dark'
  onCycleMode: () => void
}

function getModeLabel(mode: ThemeModePreference, resolvedMode: 'light' | 'dark'): string {
  switch (mode) {
    case 'system':
      return `Авто (${resolvedMode === 'dark' ? 'тёмная' : 'светлая'})`
    case 'light':
      return 'Светлая'
    case 'dark':
      return 'Тёмная'
  }
}

export function ModeSwitcher({ mode, resolvedMode, onCycleMode }: Props) {
  const icon = mode === 'system' ? <Monitor /> : resolvedMode === 'dark' ? <Sun /> : <Moon />

  return (
    <Tooltip title={`Тема: ${getModeLabel(mode, resolvedMode)}`}>
      <IconButton color="inherit" onClick={onCycleMode} aria-label="Переключить тему">
        {icon}
      </IconButton>
    </Tooltip>
  )
}
