"use client";

import { useState } from "react";

const TABS = [
  { label: "Morning", pages: "32p", slug: "morning" },
  { label: "Evening", pages: "24p", slug: "evening" },
  { label: "Sunday Long Read", pages: "48p", slug: "weekend-special" },
  { label: "Mumbai Mirror", pages: "16p", slug: "mumbai-mirror" },
  { label: "Delhi Daily", pages: "20p", slug: "delhi-daily" },
  { label: "Bengaluru Today", pages: "18p", slug: "bengaluru-today" },
  { label: "Markets Pulse", pages: "12p", slug: "markets-pulse" },
];

interface EPaperHeroProps {
  editionId?: string;
}

export default function EPaperHero({ editionId }: EPaperHeroProps) {
  const initialTab = editionId
    ? Math.max(0, TABS.findIndex((t) => t.slug === editionId))
    : 0;
  const [activeTab, setActiveTab] = useState(initialTab);

  return (
    <header className="ep-hero">
      <div className="wrap">
        <div className="ep-hero-top">
          <div>
            <div className="crumb">
              <a href="/">Home</a>
              <span className="sep">›</span>
              <span>E-Paper</span>
            </div>
            <h1>The morning paper, on screen.</h1>
          </div>
          <div className="date-strip">
            <span className="live">TODAY</span>
            <span>Wednesday, <b>20 May 2026</b></span>
            <span>·</span>
            <span>Morning Edition</span>
            <span>·</span>
            <span><b>32</b> pages</span>
            <span>·</span>
            <span>06:00 IST</span>
          </div>
        </div>
      </div>

      <div className="ep-controls">
        <div className="wrap ep-controls-row">
          <div className="ep-tabs">
            {TABS.map((tab, i) => (
              <button
                key={tab.label}
                className={`ep-tab${activeTab === i ? " active" : ""}`}
                onClick={() => setActiveTab(i)}
              >
                {tab.label} <span className="ct">{tab.pages}</span>
              </button>
            ))}
          </div>
          <div className="ep-actions">
            <select aria-label="Language">
              <option>English</option>
              <option>हिंदी</option>
              <option>ગુજરાતી</option>
              <option>தமிழ்</option>
            </select>
            <button className="btn">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 4v12M6 10l6 6 6-6M4 20h16" />
              </svg>
              Download PDF
            </button>
            <button className="btn">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="18" cy="5" r="3" />
                <circle cx="6" cy="12" r="3" />
                <circle cx="18" cy="19" r="3" />
                <path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4" />
              </svg>
              Share
            </button>
            <button className="btn">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <polyline points="6 9 6 2 18 2 18 9" />
                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
                <rect x="6" y="14" width="12" height="8" />
              </svg>
              Print
            </button>
            <button className="btn primary">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M3 12h18M3 6h18M3 18h18" />
              </svg>
              Reader view
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}