import type { Meta, StoryObj } from "@storybook/react";
import type { StackProps } from ".";
import { Stack } from ".";
import { excludeControls } from "../../utils";
import { Button } from "../Button";

type StoryType = StoryObj<typeof Stack>;

const meta: Meta<typeof Stack> = {
  title: "Layout/Stack",
  component: Stack,
  argTypes: {
    ...excludeControls("className"),
    gap: {
      control: {
        type: "select",
        options: ["", "xs", "sm", "md", "lg", "xl"],
      },
    },
  },
};

export const Default: StoryType = {
  render: (args: StackProps) => (
    <Stack {...args}>
      <Button type="button">One</Button>
      <Button type="button">Two</Button>
      <Button type="button">Three</Button>
      <Button type="button">Four</Button>
    </Stack>
  ),
  args: {
    gap: "xs",
  },
};

export const Nested: StoryType = {
  render: (args: StackProps) => (
    <Stack {...args}>
      <Button type="button">One</Button>
      <Button type="button">Two</Button>
      <Stack {...args}>
        <Button type="button" variant="secondary">
          Three
        </Button>
        <Button type="button" variant="secondary">
          Four
        </Button>
      </Stack>
    </Stack>
  ),
  args: {
    gap: "xs",
  },
};

export default meta;
