// app.tsx
import React, { FC } from "react";
import ThemeProvider, { Mode } from "https://deno.land/x/aleph_provider_theme@1.5.0/mod.tsx";

export default function App(
  { Page, pageProps }: { Page: FC; pageProps: Record<string, unknown> },
) {
  return (
    <ThemeProvider initialMode={Mode.SYSTEM}>
      <Page {...pageProps} />
    </ThemeProvider>
  );
}

// components/ThemeToggler.tsx
import React, { useCallback } from "react";
import { Mode, useTheme } from "https://deno.land/x/aleph_provider_theme@1.5.0/mod.tsx";

const options = [
  {
    emoji: "⛅",
    label: "Light Mode",
    value: Mode.LIGHT,
  },
  {
    emoji: "🌑",
    label: "Dark Mode",
    value: Mode.DARK,
  },
  {
    emoji: "⚡",
    label: "System Mode",
    value: Mode.SYSTEM,
  },
];

export default function ThemeToggler() {
  const { mode, setMode } = useTheme();

  const onChange = useCallback(
    (event) => setMode(event.target.value),
    [],
  );

  return (
    <select onChange={onChange}>
      {options.map(({ emoji, label, value }) => (
        <option value={value} selected={value === mode} key={value}>
          {emoji} {label}
        </option>
      ))}
    </select>
  );
}