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

const meta = {
  title: 'Blocks/Separator',
  component: Separator,
  argTypes: {
    orientation: {
      control: { type: 'select' },
      options: ['horizontal', 'vertical'],
      table: {
        type: { summary: 'horizontal | vertical' },
        defaultValue: { summary: 'horizontal' },
      },
    },
    decorative: {
      description:
        'Whether the separator is decorative (not announced by screen readers).',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'true' },
      },
    },
    className: {
      description: 'Additional CSS classes to apply to the separator.',
      control: 'text',
      table: {
        type: { summary: 'string' },
      },
    },
  },
  args: {
    orientation: 'horizontal',
    decorative: true,
  },
} satisfies Meta<typeof Separator>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    orientation: 'horizontal',
    className: '',
  },
  render: (args) => (
    <div className="flex h-8 items-center gap-4">
      <Separator {...args} />
    </div>
  ),
}
export const Horizontal: Story = {
  args: {
    orientation: 'horizontal',
  },
}

export const Vertical: Story = {
  args: {
    orientation: 'vertical',
  },
  render: (_args) => (
    <div className="flex h-8 items-center gap-4">
      <Typography>Left</Typography>
      <Separator orientation="vertical" />
      <Typography>Right</Typography>
    </div>
  ),
}

export const CustomStyling: Story = {
  args: {
    className: 'bg-red-500 h-2',
  },
}

export const InContent: Story = {
  render: (_args) => (
    <div className="space-y-4 p-4">
      <div>
        <Typography variant="h4">Section 1</Typography>
        <Typography className="text-sm text-gray-600">
          This is the first section content.
        </Typography>
      </div>
      <Separator />
      <div>
        <Typography variant="h4">Section 2</Typography>
        <Typography className="text-sm text-gray-600">
          This is the second section content.
        </Typography>
      </div>
      <Separator />
      <div>
        <Typography variant="h4">Section 3</Typography>
        <Typography className="text-sm text-gray-600">
          This is the third section content.
        </Typography>
      </div>
    </div>
  ),
}

export const NavigationExample: Story = {
  render: (_args) => (
    <nav className="flex h-8 items-center gap-2">
      <Typography>Home</Typography>
      <Separator orientation="vertical" />
      <Typography>Products</Typography>
      <Separator orientation="vertical" />
      <Typography>About</Typography>
      <Separator orientation="vertical" />
      <Typography>Contact</Typography>
    </nav>
  ),
}