import { useState } from "react";
import { MarkdownPage } from "./components/MarkdownPage";
import { Demo } from "./components/Demo";

type Tab = "about" | "demo";

export const App = () => {
  const [tab, setTab] = useState<Tab>("about");

  return (
    <div
      style={{
        maxWidth: 980,
        margin: "0 auto",
        padding: "0 20px 60px",
        fontFamily:
          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
        color: "#1f2328",
      }}
    >
      <nav
        style={{
          position: "sticky",
          top: 0,
          background: "#fff",
          borderBottom: "1px solid #e2e2e2",
          padding: "12px 0",
          display: "flex",
          gap: 8,
          zIndex: 10,
        }}
      >
        <TabButton active={tab === "about"} onClick={() => setTab("about")}>
          About
        </TabButton>
        <TabButton active={tab === "demo"} onClick={() => setTab("demo")}>
          Live demo
        </TabButton>
      </nav>
      <div style={{ paddingTop: 20 }}>
        {tab === "about" ? <MarkdownPage /> : <Demo />}
      </div>
    </div>
  );
};

const TabButton = ({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) => (
  <button
    onClick={onClick}
    style={{
      border: "none",
      background: active ? "#1f6feb" : "transparent",
      color: active ? "#fff" : "#1f6feb",
      padding: "6px 14px",
      borderRadius: 6,
      cursor: "pointer",
      fontSize: 14,
      fontWeight: 600,
    }}
  >
    {children}
  </button>
);