/** Theme click handled by /public/theme.js — works without React hydration */
export function ThemeToggle() {
  return (
    <button
      type="button"
      data-theme-toggle
      aria-pressed="false"
      aria-label="Switch to dark mode"
      title="Dark mode"
      className="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-full border-2 border-[var(--border-strong)] bg-[var(--surface)] px-3 text-[var(--foreground)] shadow-sm transition-[background-color,border-color,color] duration-200 hover:border-[var(--accent)]"
    >
      <span data-theme-icon="sun" hidden aria-hidden>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-16v2m0 16v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M2 12h2m16 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
        </svg>
      </span>
      <span data-theme-icon="moon" aria-hidden>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
          <path d="M21 14.5A8.5 8.5 0 0 1 9.5 3 7 7 0 1 0 21 14.5z" />
        </svg>
      </span>
      <span data-theme-label className="text-xs font-bold tracking-wide">
        Dark
      </span>
    </button>
  );
}