import type { Meta, StoryObj } from "@storybook/react-vite"
import {
  RadialGridExample,
  RadialLabelExample,
  RadialShapeExample,
  RadialSimpleExample,
  RadialStackedExample,
  RadialTextExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Sample data only. One example per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked).
const meta = {
  title: "Chart/Radial Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Radial: Story = {
  name: "Radial Chart",
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Radial Chart" />
      {/* Same grid as the other Chart pages: two per row from 1024px, one below; source order is the mobile order. */}
      <div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
        <StorySection title="Radial Chart">
          <RadialSimpleExample />
        </StorySection>
        <StorySection title="Radial Chart + Label">
          <RadialLabelExample />
        </StorySection>
        <StorySection title="Radial Chart - Grid">
          <RadialGridExample />
        </StorySection>
        <StorySection title="Radial Chart + Text">
          <RadialTextExample />
        </StorySection>
        <StorySection title="Radial Chart - Shape">
          <RadialShapeExample />
        </StorySection>
        <StorySection title="Radial Chart + Stacked">
          <RadialStackedExample />
        </StorySection>
      </div>
    </StoryPage>
  ),
}