import { useState } from "react";

const editions = {
  EN: {
    title: "English edition",
    summary: "Primary voice. Long-form essays, consultancy notes, and magazine features.",
    suggestions: ["Operator notebook", "School dossier", "Jazz dispatch"],
  },
  NB: {
    title: "Norsk utgave",
    summary: "For local civic writing, Norway-facing pieces, and softer cultural transitions.",
    suggestions: ["Norsk samfunn", "Familiearkiv", "Lokale observasjoner"],
  },
  FR: {
    title: "Edition francaise",
    summary: "For wit, pataphysical texture, and the elegant international side of the house.",
    suggestions: ["Chronique", "Cabinet de curiosites", "Salon numerique"],
  },
};

export default function EditionConsole() {
  const [activeEdition, setActiveEdition] = useState("EN");
  const active = editions[activeEdition];

  return (
    <section className="edition-console">
      <div className="edition-console__topline">
        <span>AI edition console</span>
        <span>Prototype</span>
      </div>

      <div className="edition-console__controls" role="tablist" aria-label="Edition selector">
        {Object.keys(editions).map((edition) => (
          <button
            key={edition}
            type="button"
            role="tab"
            aria-selected={activeEdition === edition}
            className={activeEdition === edition ? "is-active" : ""}
            onClick={() => setActiveEdition(edition)}
          >
            {edition}
          </button>
        ))}
      </div>

      <div className="edition-console__body">
        <p className="edition-console__title">{active.title}</p>
        <p className="edition-console__summary">{active.summary}</p>
        <ul className="edition-console__list">
          {active.suggestions.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}
