import { Dropdown } from "react-bootstrap";
import { useTheme } from "./ThemeContext.tsx";

const options = [
  { key: "light" as const, label: "Light", icon: "☀️" },
  { key: "dark" as const, label: "Dark", icon: "🌙" },
  { key: "system" as const, label: "System", icon: "💻" },
];

export function ThemeToggle() {
  const { choice, setChoice } = useTheme();
  const current = options.find((o) => o.key === choice) ?? options[2];

  return (
    <Dropdown align="end">
      <Dropdown.Toggle variant="outline-secondary" size="sm">
        {current.icon}
      </Dropdown.Toggle>
      <Dropdown.Menu>
        {options.map((o) => (
          <Dropdown.Item
            key={o.key}
            active={o.key === choice}
            onClick={() => setChoice(o.key)}
          >
            {o.icon} {o.label}
          </Dropdown.Item>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
}