import { createContext, type ReactNode } from "react"
import "./story-page.css"

// Storybook presentation only (not part of @hm-design/ui): the common frame of a representative Story page.
// Page → Header (title, description) → Sections (title, description, specimen). It never styles the component being reviewed.
// Inner and title follow Foundation / Color; the section header → content split follows Center Graphic / 교량.
// A Story using it sets `parameters.layout: "fullscreen"` so the page owns its inner padding.

// Lets StateBoard render its specimen labels one level below the section heading.
export const StorySectionContext = createContext(false)

export function StoryPage({ className, children }: { className?: string; children: ReactNode }) {
  return <div className={className ? `sb-page ${className}` : "sb-page"}><div className="sb-page-inner">{children}</div></div>
}

export function StoryPageHeader({ kicker, title, description }: { kicker: string; title: string; description?: ReactNode }) {
  return (
    <header className="sb-page-header">
      <p className="sb-page-kicker">{kicker}</p>
      <h1 className="sb-page-title">{title}</h1>
      {description ? <p className="sb-page-description">{description}</p> : null}
    </header>
  )
}

// Headings and specimens share StoryPage's single Inner. Wide specimens own their local scroll frame.
export function StorySection({
  title,
  description,
  id,
  children,
}: {
  title: string
  description?: ReactNode
  id?: string
  children: ReactNode
}) {
  return (
    <section className="sb-page-section" id={id} aria-label={title}>
      <header className="sb-page-section-header">
        <h2 className="sb-page-section-title">{title}</h2>
        {description ? <p className="sb-page-section-description">{description}</p> : null}
      </header>
      <StorySectionContext.Provider value>
        <div className="sb-page-section-body">{children}</div>
      </StorySectionContext.Provider>
    </section>
  )
}

export const STORY_KICKER = {
  foundation: "HM DESIGN SYSTEM / FOUNDATION",
  components: "HM DESIGN SYSTEM / COMPONENTS",
  patterns: "HM DESIGN SYSTEM / PATTERNS",
  center: "HM DESIGN SYSTEM / CENTER GRAPHIC",
} as const