import { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { Button } from "../Button"
import { CenterAligned } from "../CenterAligned"
import { SpaceBetween } from "../SpaceBetween"
import { SideModule, SideModuleProps } from "./SideModule"

type Story = StoryObj<typeof SideModule>

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

export default meta

const Template = (args: SideModuleProps) => {
  return (
    <>
      <SideModule {...args}>
        <SideModule.Section>
          <SpaceBetween className="items-center">
            <SideModule.Section.Title>Owned Items</SideModule.Section.Title>
            <Button variant="secondary">Recent</Button>
          </SpaceBetween>

          <CenterAligned className="h-[450px]">Content</CenterAligned>
        </SideModule.Section>

        <SideModule.Section>
          <SpaceBetween className="items-center">
            <SideModule.Section.Title>My Listings</SideModule.Section.Title>
            <Button variant="secondary">Recent</Button>
          </SpaceBetween>
          <CenterAligned className="h-[450px]">Content</CenterAligned>
        </SideModule.Section>
      </SideModule>
    </>
  )
}

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