admin / Bid-Sentinel

import { useTheme } from "../context/ThemeContext.jsx";

/**
 * Light/dark theme toggle.
 * variant="header" — for the brand (navy) app headers (translucent white).
 * variant="ghost"  — for light surfaces (e.g. the login screen).
 */
export default function ThemeToggle({ variant = "header" }) {
  const { theme, toggle } = useTheme();
  const dark = theme === "dark";

  const styles =
    variant === "header"
      ? "bg-white/10 text-white hover:bg-white/20"
      : "border border-slate-300 text-slate-600 hover:bg-slate-50";

  return (
    <button
      onClick={toggle}
      className={`inline-flex items-center justify-center rounded-md px-2.5 py-1.5 text-sm transition ${styles}`}
      title={dark ? "Switch to light mode" : "Switch to dark mode"}
      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
    >
      <span aria-hidden="true">{dark ? "☀️" : "🌙"}</span>
    </button>
  );
}