import type { Meta, StoryObj } from "@storybook/react-vite"
import {
  LineCurveDotLabelExample,
  LineCurveExample,
  LineStepDotLabelExample,
  LineStepExample,
  LineStraightColorLabelExample,
  LineStraightExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Sample data only. All six examples share one data set and axis range, so connection styles compare directly: curve, straight
// and step, each as a plain line (left) and with Dots and value labels (right).
const meta = {
  title: "Chart/Line Chart",
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

export const Line: Story = {
  name: "Line Chart",
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Line Chart" />
      {/* Same grid as Bar Chart: two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row:
          Curve | Curve + labels, Straight | Straight + colored labels, Step | Step + labels. */}
      <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">
          <LineCurveExample />
        </StorySection>
        <StorySection title="Curve · Dot + Label">
          <LineCurveDotLabelExample />
        </StorySection>
        <StorySection title="Straight">
          <LineStraightExample />
        </StorySection>
        <StorySection title="Straight · Color Dot + Label">
          <LineStraightColorLabelExample />
        </StorySection>
        <StorySection title="Step">
          <LineStepExample />
        </StorySection>
        <StorySection title="Step · Dot + Label">
          <LineStepDotLabelExample />
        </StorySection>
      </div>
    </StoryPage>
  ),
}