"use client";

import { useState, type ReactNode } from "react";

/** Article wrapper with the dark ⇄ light "reading mode" toggle. */
export default function ArticleShell({ children }: { children: ReactNode }) {
  const [light, setLight] = useState(false);

  return (
    <div className={`transition-colors duration-500 ${light ? "reading-light" : "bg-obsidian"}`}>
      <div className="mx-auto max-w-3xl px-6 pb-28 pt-32 md:pt-40">
        <div className="mb-10 flex justify-end">
          <button
            type="button"
            onClick={() => setLight((v) => !v)}
            aria-pressed={light}
            className={`border px-4 py-2 font-mono text-[0.62rem] uppercase tracking-[0.26em] transition-colors ${
              light
                ? "border-obsidian/30 text-obsidian hover:bg-obsidian hover:text-ivory"
                : "border-ivory/20 text-warmgrey hover:border-gold hover:text-gold"
            }`}
          >
            Aa · {light ? "Cinema mode" : "Reading mode"}
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}