import type { ComponentProps } from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { Flex } from "@jobber/components-native";
import { FlexMultiRow, FlexNested } from "./docs";

const meta = {
  title: "Components/Layouts and Structure/Flex",
  component: Flex,
  parameters: {
    backgrounds: {
      default: "surface background",
    },
    viewport: { defaultViewport: "mobile1" },
  },
} satisfies Meta<typeof Flex>;
export default meta;
type FlexStoryArgs = Pick<
  ComponentProps<typeof Flex>,
  "template" | "align" | "gap"
>;
type Story = StoryObj<FlexStoryArgs>;

export const Nested: Story = {
  render: FlexNested,
  args: {
    template: ["grow", "shrink"],
    align: "center",
  },
};

export const MultiRow: Story = {
  render: FlexMultiRow,
  args: {
    template: ["grow", "grow"],
    gap: "small",
  },
};