// Every button style and state, in one theme scope. Used by the dev story page
// (src/app/dev/buttons) and the button tests.
import type { CSSProperties, ReactNode } from "react";
import type { Theme } from "@/lib/theme";
import { DepthButton, FlipButton, GrowButton, IconButton, SendIcon, SparkleButton, SweepButton } from "./Buttons";

const scope: CSSProperties = {
  background: "var(--bg)",
  color: "var(--ink)",
  padding: "32px 28px",
  display: "flex",
  flexDirection: "column",
  gap: 28,
};
const row: CSSProperties = { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14 };
const heading: CSSProperties = { margin: "0 0 10px", fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-3)" };

function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section>
      <h2 style={heading}>{title}</h2>
      <div style={row}>{children}</div>
    </section>
  );
}

const FlameIcon = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 21c4 0 7-2.8 7-6.8 0-4.5-4-6.7-5-11.2-2.3 1.7-3.5 4-3.2 6.5C9.5 9 8.6 8 8.3 6.6 6.3 8.5 5 10.9 5 14.2 5 18.2 8 21 12 21z" />
  </svg>
);
const TrashIcon = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13" />
  </svg>
);
const PlayIcon = (
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M8 5.5v13l11-6.5z" fill="currentColor" />
  </svg>
);

export function ButtonGallery({ theme }: { theme: Theme }) {
  return (
    <div data-theme={theme} style={scope} aria-label={`Buttons, ${theme} theme`} role="region">
      <h1 className="type-title type-title-strong" style={{ margin: 0 }}>
        {theme === "dark" ? "Dark" : "Light"} theme
      </h1>
      <Section title="Flip reveal: ready, disabled, posting">
        <FlipButton state="ready" type="button" />
        <FlipButton state="disabled" type="button" />
        <FlipButton state="posting" type="button" />
      </Section>
      <Section title="Circle expand">
        <GrowButton label="3 new posts" />
      </Section>
      <Section title="Outline fill sweep">
        <SweepButton label="Business" selected />
        <SweepButton label="Media" selected={false} />
        <SweepButton label="Cancel" />
      </Section>
      <Section title="Soft depth, rising liquid">
        <div style={{ width: 280 }}>
          <DepthButton label="Trending minnects" sublabel="What people are watching" icon={FlameIcon} />
        </div>
      </Section>
      <Section title="Sparkle glow: sign in, mobile new post">
        <SparkleButton label="Sign in" />
        <SparkleButton variant="fab" label="New post" />
      </Section>
      <Section title="Glossy crimson icon button">
        <IconButton label="Send comment" icon={<SendIcon />} />
        <IconButton label="Delete post" icon={TrashIcon} size="sm" />
        <IconButton label="Play video" icon={PlayIcon} shape="round" />
        <IconButton label="Send comment (disabled)" icon={<SendIcon />} disabled />
      </Section>
    </div>
  );
}