import { Meta, StoryObj } from "@storybook/react"
import React, { ComponentProps } from "react"
import { Flex } from "../Flex/Flex"
import { Container } from "./Container"

type Story = StoryObj<typeof Container>

const meta: Meta<typeof Container> = {
  title: "Design System/Container",
  component: Container,
}

export default meta

const Template = (args: ComponentProps<typeof Container>) => {
  return (
    <Container {...args}>
      <Flex className="h-[500px] w-full bg-blue-3">Content</Flex>
    </Container>
  )
}

export const Default: Story = {
  render: Template,
}

export const Left: Story = {
  render: Template,
  args: {
    padding: "left",
  },
}

export const Right: Story = {
  render: Template,
  args: {
    padding: "right",
  },
}

export const None: Story = {
  render: Template,
  args: {
    padding: "none",
  },
}