"use client";

import { Sun, Moon, Monitor } from "lucide-react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { setTheme } from "@/store/slices/themeSlice";
import type { ThemeMode } from "@/store/slices/themeSlice";

const OPTIONS: { mode: ThemeMode; Icon: React.ElementType; label: string }[] = [
  { mode: "light", Icon: Sun, label: "Light" },
  { mode: "dark", Icon: Moon, label: "Dark" },
  // { mode: "system", Icon: Monitor, label: "System" },
];

export function ThemeToggle() {
  const dispatch = useAppDispatch();
  const mode = useAppSelector((s) => s.theme.mode);

  return (
    <div
      className="flex items-center gap-0.5 rounded-lg p-0.5"
      style={{
        background: "var(--deep)",
        border: "1px solid var(--border)",
      }}
    >
      {OPTIONS.map(({ mode: m, Icon, label }) => {
        const active = mode === m;
        return (
          <button
            key={m}
            onClick={() => dispatch(setTheme(m))}
            title={label}
            aria-label={`${label} theme`}
            className="w-7 h-7 rounded-md flex items-center justify-center transition-all active:scale-90"
            style={{
              background: active ? "var(--accent)" : "transparent",
              color: active ? "#fff" : "var(--text-muted)",
            }}
          >
            <Icon size={13} strokeWidth={active ? 2.2 : 1.8} />
          </button>
        );
      })}
    </div>
  );
}