import type { Meta, StoryObj } from "@storybook/react-vite"
import {
  AreaCurveDotLabelExample,
  AreaCurveExample,
  AreaExpandedExample,
  AreaStackedExample,
  AreaStepDotLabelExample,
  AreaStepExample,
  AreaStraightColorLabelExample,
  AreaStraightExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Sample data only. The eight examples share the Line Chart data: connection styles as a plain area (left) and with Dots and
// value Labels (right), then Stacked (running total) and Expanded (each month normalized to 100%).
const meta = {
  title: "Chart/Area Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Area: Story = {
  name: "Area Chart",
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Area Chart" />
      {/* Same grid and order as Line Chart, plus a Stacked | Expanded row. */}
      <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="Curve">
          <AreaCurveExample />
        </StorySection>
        <StorySection title="Curve · Dot + Label">
          <AreaCurveDotLabelExample />
        </StorySection>
        <StorySection title="Straight">
          <AreaStraightExample />
        </StorySection>
        <StorySection title="Straight · Color Dot + Label">
          <AreaStraightColorLabelExample />
        </StorySection>
        <StorySection title="Step">
          <AreaStepExample />
        </StorySection>
        <StorySection title="Step · Dot + Label">
          <AreaStepDotLabelExample />
        </StorySection>
        <StorySection title="Stacked">
          <AreaStackedExample />
        </StorySection>
        <StorySection title="Expanded">
          <AreaExpandedExample />
        </StorySection>
      </div>
    </StoryPage>
  ),
}