import { Separator } from "@ai-ui/ui";
import type { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "Components/Separator",
  component: Separator,
  args: {
    orientation: "horizontal",
    tone: "subtle"
  },
  argTypes: {
    className: {
      control: false
    },
    decorative: {
      control: "boolean"
    },
    orientation: {
      control: "radio",
      options: ["horizontal", "vertical"]
    },
    tone: {
      control: "radio",
      options: ["subtle", "strong"]
    }
  },
  parameters: {
    layout: "centered"
  },
  tags: ["autodocs"]
} satisfies Meta<typeof Separator>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Playground: Story = {
  render: (args) => (
    <div className="w-80">
      <Separator {...args} />
    </div>
  )
};

export const InCard: Story = {
  render: () => (
    <div className="w-[420px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-5 shadow-[var(--shadow-sm)]">
      <div className="space-y-3">
        <div>
          <h3 className="m-0 text-base font-semibold">Workspace</h3>
          <p className="m-0 text-sm text-[var(--color-muted-foreground)]">
            Project status and recent activity
          </p>
        </div>
        <Separator />
        <div className="grid gap-2 text-sm text-[var(--color-muted-foreground)]">
          <div className="flex items-center justify-between">
            <span>Tokens</span>
            <span className="text-[var(--color-foreground)]">Stable</span>
          </div>
          <div className="flex items-center justify-between">
            <span>Components</span>
            <span className="text-[var(--color-foreground)]">In progress</span>
          </div>
        </div>
      </div>
    </div>
  )
};

export const Vertical: Story = {
  render: () => (
    <div className="flex h-16 items-center gap-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] px-5 shadow-[var(--shadow-xs)]">
      <span className="text-sm text-[var(--color-muted-foreground)]">Overview</span>
      <Separator className="h-8" orientation="vertical" />
      <span className="text-sm text-[var(--color-muted-foreground)]">Metrics</span>
      <Separator className="h-8" orientation="vertical" tone="strong" />
      <span className="text-sm text-[var(--color-muted-foreground)]">Activity</span>
    </div>
  )
};