import { Divider } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Divider> = {
  title: "Components/Divider",
  component: Divider,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A simple divider component used to separate content sections with a horizontal line.",
      },
    },
  },
  argTypes: {
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
  },
  args: {},
};

export default meta;
type Story = StoryObj<typeof meta>;

// Default divider
export const Default: Story = {
  args: {},
};

// Horizontal divider
export const Horizontal: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-4">
      <p className="body2 text-text">Content above the divider</p>
      <Divider />
      <p className="body2 text-text">Content below the divider</p>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Default horizontal divider separating content sections.",
      },
    },
  },
};

// Custom styling
export const CustomStyling: Story = {
  args: {
    className: "h-0.5 bg-border-brand",
  },
  render: args => (
    <div className="max-w-md w-full space-y-4">
      <p className="body2 text-text">Content above</p>
      <Divider {...args} />
      <p className="body2 text-text">Content below</p>
    </div>
  ),
};

// Multiple dividers
export const Multiple: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-4">
      <div>
        <h3 className="subheading1 mb-2 text-text">Section 1</h3>
        <p className="body2 text-text">Content for section 1</p>
      </div>
      <Divider />
      <div>
        <h3 className="subheading1 mb-2 text-text">Section 2</h3>
        <p className="body2 text-text">Content for section 2</p>
      </div>
      <Divider />
      <div>
        <h3 className="subheading1 mb-2 text-text">Section 3</h3>
        <p className="body2 text-text">Content for section 3</p>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Multiple dividers used to separate different content sections.",
      },
    },
  },
};

// In list
export const InList: Story = {
  render: () => (
    <div className="max-w-md border-border-default w-full space-y-0 rounded border">
      <div className="p-4">
        <p className="body2 text-text">List item 1</p>
      </div>
      <Divider />
      <div className="p-4">
        <p className="body2 text-text">List item 2</p>
      </div>
      <Divider />
      <div className="p-4">
        <p className="body2 text-text">List item 3</p>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Dividers used within a list to separate items.",
      },
    },
  },
};

// Thick divider
export const Thick: Story = {
  args: {
    className: "h-1 bg-border-default",
  },
  render: args => (
    <div className="max-w-md w-full space-y-4">
      <p className="body2 text-text">Content above</p>
      <Divider {...args} />
      <p className="body2 text-text">Content below</p>
    </div>
  ),
};

// Colored divider
export const Colored: Story = {
  args: {
    className: "h-0.5 bg-border-brand",
  },
  render: args => (
    <div className="max-w-md w-full space-y-4">
      <p className="body2 text-text">Content above</p>
      <Divider {...args} />
      <p className="body2 text-text">Content below</p>
    </div>
  ),
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-8">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Default Divider</h3>
        <div className="space-y-4">
          <p className="body2 text-text">Content above</p>
          <Divider />
          <p className="body2 text-text">Content below</p>
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
        <div className="space-y-4">
          <p className="body2 text-text">Content above</p>
          <Divider className="h-0.5 bg-border-brand" />
          <p className="body2 text-text">Content below</p>
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Thick Divider</h3>
        <div className="space-y-4">
          <p className="body2 text-text">Content above</p>
          <Divider className="bg-border-default h-1" />
          <p className="body2 text-text">Content below</p>
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">In List</h3>
        <div className="border-border-default rounded border">
          <div className="p-4">
            <p className="body2 text-text">Item 1</p>
          </div>
          <Divider />
          <div className="p-4">
            <p className="body2 text-text">Item 2</p>
          </div>
          <Divider />
          <div className="p-4">
            <p className="body2 text-text">Item 3</p>
          </div>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all divider variants and use cases.",
      },
    },
  },
};