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

// Owner: ui-viz docs/patterns/center-information-presentation.md and center-information-{box,table,emphasis}.md.
// Single-line ellipsis is resolved; multi-line overflow, exact placement and the presentation scale (Q3) are not.
const meta = {
  title: "노선도/정보",
  id: "center-graphic-information",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
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 Information: Story = {
  name: "정보",
  render: () => (
    <StoryPage>
      <StoryPageHeader title="정보" />
      <StorySection title="개요">
        {withRepresentation(() => (
          <div className="sb-center-information">
            <CenterInformationDisplayReferenceDemo />
          </div>
        ))}
      </StorySection>
    </StoryPage>
  ),
}