import type { Meta, StoryObj } from "@storybook/react-vite"
import { RouteLine } from "@hm-design/center-graphic"
import { CenterSpatialInformationReferenceDemo } from "@hm-design/center-graphic/reference"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { withRepresentation } from "./center-shared"

// Owners: ui-viz docs/visualization/route.md, spatial-map.md, spatial-section.md, composition.md.
// Route layer order Shadow -> Outline -> Primary Stroke is CONFIRMED; the whole-map layer order is Candidate and line join is TBD.
const meta = {
  title: "노선도/노선·공간",
  id: "center-graphic-spatial",
  component: RouteLine,
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta<typeof RouteLine>
export default meta
type Story = StoryObj<typeof meta>

// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
export const Spatial: Story = {
  name: "노선·공간",
  render: () => (
    <StoryPage className="sb-center-spatial-page">
      <StoryPageHeader title="노선·공간" />
      <StorySection title="개요">
        {withRepresentation(() => <CenterSpatialInformationReferenceDemo />)}
      </StorySection>
    </StoryPage>
  ),
}