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

const IconSun = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
    <circle cx="12" cy="12" r="4" />
    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
  </svg>
);

const IconMoon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
  </svg>
);

/**
 * @param {{ variant?: 'default' | 'chrome' }} props
 */
const ThemeToggle = ({ variant = "default" }) => {
  const { theme, toggleTheme } = useTheme();
  const isDark = theme === "dark";
  const chrome = variant === "chrome";

  return (
    <button
      type="button"
      className={chrome ? "portal-theme-toggle" : "swi-theme-toggle"}
      onClick={toggleTheme}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      aria-pressed={isDark}
      title={isDark ? "Light theme" : "Dark theme"}
    >
      <span className={chrome ? "portal-theme-toggle__icon" : "swi-theme-toggle__icon"} aria-hidden>
        {isDark ? <IconSun /> : <IconMoon />}
      </span>
      {!chrome ? <span className="swi-theme-toggle__label">{isDark ? "Light" : "Dark"}</span> : null}
    </button>
  );
};

export default ThemeToggle;
