import type { Meta, StoryObj } from '@storybook/react'
import { Typography } from '../Typography'
import { Section } from './Section'

export default {
  title: 'Layout/Section',
  component: Section,
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['default', 'alt'],
      description: 'The visual variant of the section',
    },
    border: {
      control: { type: 'boolean' },
      description: 'Whether to show a top border',
    },
    width: {
      control: { type: 'select' },
      options: ['default', 'fluid', 'narrow'],
      description: 'The width constraint of the section content',
    },
    fluid: {
      control: { type: 'boolean' },
      description: 'Deprecated: use width="fluid" instead',
    },
    className: {
      control: { type: 'text' },
      description: 'Additional CSS classes',
    },
    children: {
      control: false,
      description: 'The content to render inside the section',
    },
  },
  args: {
    variant: 'default',
    border: false,
    width: 'default',
    fluid: false,
    className: '',
  },
} satisfies Meta<typeof Section>

type Story = StoryObj<typeof Section>

export const Default: Story = {
  args: {
    variant: 'default',
    border: false,
    width: 'default',
  },
  render: (args) => (
    <Section {...args}>
      <Typography variant="h2">Section Title</Typography>
      <Typography variant="body">
        This is a default section with standard width constraints. The content
        is centered and has a maximum width for optimal readability.
      </Typography>
    </Section>
  ),
}

export const AltVariant: Story = {
  args: {
    variant: 'alt',
    border: true,
    width: 'default',
  },
  render: (args) => (
    <Section {...args}>
      <Typography variant="h2">Alternative Section</Typography>
      <Typography variant="body">
        This section uses the alt variant with a background color and top
        border. It&apos;s useful for creating visual separation between
        sections.
      </Typography>
    </Section>
  ),
}

export const FluidWidth: Story = {
  args: {
    variant: 'default',
    border: false,
    width: 'fluid',
  },
  render: (args) => (
    <Section {...args}>
      <Typography variant="h2">Fluid Width Section</Typography>
      <Typography variant="body">
        This section uses fluid width, allowing content to span the full width
        of the viewport without container constraints.
      </Typography>
    </Section>
  ),
}

export const NarrowWidth: Story = {
  args: {
    variant: 'default',
    border: false,
    width: 'narrow',
  },
  render: (args) => (
    <Section {...args}>
      <Typography variant="h2">Narrow Width Section</Typography>
      <Typography variant="body">
        This section uses narrow width constraints, perfect for focused content
        that benefits from a more constrained reading width.
      </Typography>
    </Section>
  ),
}

export const WithBorder: Story = {
  args: {
    variant: 'default',
    border: true,
    width: 'default',
  },
  render: (args) => (
    <Section {...args}>
      <Typography variant="h2">Section with Border</Typography>
      <Typography variant="body">
        This section has a top border enabled, creating a clear visual
        separation from the content above.
      </Typography>
    </Section>
  ),
}

export const MultipleSections: Story = {
  args: {
    variant: 'default',
    border: true,
    width: 'default',
  },
  render: (args) => (
    <>
      <Section variant="alt" border={false}>
        <Typography variant="h2">First Section</Typography>
        <Typography variant="body">
          This is the first section using the alt variant without a border.
        </Typography>
      </Section>
      <Section {...args}>
        <Typography variant="h2">Second Section</Typography>
        <Typography variant="body">
          This section uses the default variant with a border enabled.
        </Typography>
      </Section>
      <Section variant="alt" border={true}>
        <Typography variant="h2">Third Section</Typography>
        <Typography variant="body">
          This section uses the alt variant with a border for maximum
          separation.
        </Typography>
      </Section>
      <Section {...args}>
        <Typography variant="h2">Fourth Section</Typography>
        <Typography variant="body">
          This is the final section demonstrating the pattern.
        </Typography>
      </Section>
    </>
  ),
}

export const Interactive: Story = {
  args: {
    variant: 'default',
    border: false,
    width: 'default',
    className: '',
  },
  render: (args) => (
    <Section {...args}>
      <Typography variant="h2">Interactive Section</Typography>
      <Typography variant="body">
        Use the Controls panel to experiment with different section variants,
        borders, and width options. This story demonstrates all the available
        props and their effects.
      </Typography>
      <div className="mt-4 rounded bg-muted p-4">
        <Typography variant="body-xs">
          <strong>Current props:</strong> variant=&quot;{args.variant}&quot;,
          border=
          {args.border?.toString() ?? 'false'}, width=&quot;{args.width}&quot;
        </Typography>
      </div>
    </Section>
  ),
}