import type { Meta, StoryObj } from "@storybook/react-vite"
import { Collapsible } from "@hm-design/ui"
import { StoryPage, StoryPageHeader } from "@/components/story-page"
import { ClosedSpecimen, CollapsibleSections, DisabledSpecimen, LongSpecimen, OpenSpecimen } from "./collapsible-examples"

// Collapsible is a single disclosure. The specimens live in ./collapsible-examples and are also shown on the Accordion
// representative page ("접기·펼치기"), the single sidebar item for both. Every Story here keeps its ID and direct URL but is
// hidden from the sidebar (tag `verification`).

const meta = { title: "Components/Disclosure/Collapsible", component: Collapsible, parameters: { layout: "padded" } } satisfies Meta<typeof Collapsible>
export default meta
type Story = StoryObj<typeof meta>

// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Accordion
// page shows the same sections.
export const All: Story = {
  tags: ["verification"],
  name: "Collapsible",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Collapsible" />
      <CollapsibleSections />
    </StoryPage>
  ),
}

export const Closed: Story = { tags: ["verification"], render: () => <ClosedSpecimen /> }
export const Open: Story = { tags: ["verification"], render: () => <OpenSpecimen /> }
export const Disabled: Story = { tags: ["verification"], render: () => <DisabledSpecimen /> }
export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongSpecimen /> }