import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react"

import type { I18nDevtoolTheme } from "./devtool-preferences"
import { useDevtoolLocalization } from "./devtool-localization"

export interface DevtoolThemeSwitcherProps {
  onThemeChange: (theme: I18nDevtoolTheme) => void
  theme: I18nDevtoolTheme
}

const themes = [
  {
    accessibleLabel: "autoTheme",
    icon: MonitorIcon,
    label: "auto",
    value: "auto",
  },
  {
    accessibleLabel: "lightTheme",
    icon: SunIcon,
    label: "light",
    value: "light",
  },
  {
    accessibleLabel: "darkTheme",
    icon: MoonIcon,
    label: "dark",
    value: "dark",
  },
] as const

export function DevtoolThemeSwitcher({
  onThemeChange,
  theme,
}: DevtoolThemeSwitcherProps) {
  const { messages } = useDevtoolLocalization()

  return (
    <div
      aria-label={messages.settings.themeControl}
      className="i18n-devtool__theme-switcher"
      role="group"
    >
      {themes.map(({ accessibleLabel, icon: ThemeIcon, label, value }) => (
        <button
          key={value}
          type="button"
          aria-label={messages.settings[accessibleLabel]}
          aria-pressed={theme === value}
          onClick={() => onThemeChange(value)}
        >
          <ThemeIcon aria-hidden="true" />
          <span>{messages.settings[label]}</span>
        </button>
      ))}
    </div>
  )
}