import { useTheme } from "../useTheme";

export default function ThemeToggle() {
  const { dark, toggle } = useTheme();

  return (
    <button
      onClick={toggle}
      className="bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-secondary)] px-[13px] py-[6px] rounded-md text-xs font-body cursor-pointer transition-all hover:border-[var(--brand)] hover:text-[var(--brand)]"
    >
      ◐ {dark ? "Dark" : "Light"}
    </button>
  );
}