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

import { Separator } from '@/components/ui/separator'

const meta = {
  title: 'Layout/Separator',
  component: Separator,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  argTypes: {
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
    },
    decorative: { control: 'boolean' },
  },
} satisfies Meta<typeof Separator>

export default meta
type Story = StoryObj<typeof meta>

export const Horizontal: Story = {
  args: {
    orientation: 'horizontal',
  },
  decorators: [
    (Story) => (
      <div className="w-75">
        <div className="space-y-1">
          <h4 className="text-sm font-medium leading-none">Greyhaven Design System</h4>
          <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
        </div>
        <Story />
        <div className="flex h-5 items-center space-x-4 text-sm">
          <div>Blog</div>
          <div>Docs</div>
          <div>Source</div>
        </div>
      </div>
    ),
  ],
}

export const Vertical: Story = {
  args: {
    orientation: 'vertical',
  },
  decorators: [
    (Story) => (
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Story />
        <div>Docs</div>
        <Story />
        <div>Source</div>
      </div>
    ),
  ],
}