import { separatorPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { Separator } from "./Separator"

/**
 * The Separator component is used to visually separate content sections.
 * It provides a horizontal or vertical line that can be customized with different orientations and styling.
 */
const meta = {
  title: "base/containment/Separator",
  component: Separator,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    orientation: {
      control: { type: "select" },
      options: separatorPropDefs.orientation.values,
    },
    size: {
      control: { type: "select" },
      options: separatorPropDefs.size.values,
    },
    color: {
      control: { type: "select" },
      options: separatorPropDefs.color.values,
    },
  },
} satisfies Meta<typeof Separator>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default horizontal separator.
 */
export const Default: Story = {
  render: args => (
    <div className="w-64 p-4">
      <div>Content above</div>
      <Separator {...args} />
      <div>Content below</div>
    </div>
  ),
}

/**
 * Vertical separator for side-by-side content.
 */
export const Vertical: Story = {
  args: {
    orientation: "vertical",
  },
  render: args => (
    <div className="flex items-center h-16 p-4">
      <div>Left content</div>
      <Separator {...args} className="mx-4" />
      <div>Right content</div>
    </div>
  ),
}

/**
 * Different sizes of separators.
 */
export const Sizes: Story = {
  render: args => (
    <div className="space-y-4 w-64">
      {separatorPropDefs.size.values.map(size => (
        <div key={size}>
          <div>{`Size ${size}`}</div>
          <Separator {...args} size={size} />
          <div>Content</div>
        </div>
      ))}
    </div>
  ),
}

/**
 * Separators with different colors.
 */
export const Colors: Story = {
  render: args => (
    <div className="space-y-4 w-64">
      {separatorPropDefs.color.values.map(color => (
        <div key={color}>
          <div className="capitalize">{color}</div>
          <Separator {...args} size="3" color={color} />
        </div>
      ))}
    </div>
  ),
}