import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiSeparator from './UiSeparator.vue';

/**
 * UiSeparator is a horizontal or vertical divider that semantically and visually separates groups of content.
 * Use it sparingly to reinforce structure where whitespace alone is not enough.
 */
const meta: Meta<typeof UiSeparator> = {
  title: 'Components/UiSeparator',
  component: UiSeparator,
  tags: ['autodocs'],
  argTypes: {
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'The orientation of the separator.\n\n@default "horizontal"',
    },
    decorative: {
      control: 'boolean',
      description:
        'When true, the separator is purely decorative.\n\n@default true',
    },
  },
  args: {
    orientation: 'horizontal',
    decorative: true,
  },
};

export default meta;

type Story = StoryObj<typeof UiSeparator>;

const defaultTemplateSource = `<script setup lang="ts">
import { UiSeparator } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="gap-y-4">
    <div>
      <h4 class="body-14-medium">Section Title</h4>
      <p class="body-14-regular text-muted-foreground">Description text goes here.</p>
    </div>
    <UiSeparator />
    <div>
      <h4 class="body-14-medium">Another Section</h4>
      <p class="body-14-regular text-muted-foreground">More content below the separator.</p>
    </div>
  </div>
</template>`;

/**
 * Horizontal separator between content sections.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiSeparator },
    setup() {
      return { args };
    },
    template: `<div class="gap-y-4">
      <div>
        <h4 class="body-14-medium">Section Title</h4>
        <p class="body-14-regular text-muted-foreground">Description text goes here.</p>
      </div>
      <UiSeparator v-bind="args" />
      <div>
        <h4 class="body-14-medium">Another Section</h4>
        <p class="body-14-regular text-muted-foreground">More content below the separator.</p>
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const verticalTemplateSource = `<script setup lang="ts">
import { UiSeparator } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex h-5 items-center gap-x-4 body-14-regular">
    <span>Home</span>
    <UiSeparator orientation="vertical" />
    <span>Products</span>
    <UiSeparator orientation="vertical" />
    <span>About</span>
    <UiSeparator orientation="vertical" />
    <span>Contact</span>
  </div>
</template>`;

/**
 * Vertical separator for inline content.
 */
export const Vertical: Story = {
  render: (args) => ({
    components: { UiSeparator },
    setup() {
      return { args };
    },
    template: `<div class="flex h-5 items-center gap-x-4 body-14-regular">
      <span>Home</span>
      <UiSeparator v-bind="args" orientation="vertical" />
      <span>Products</span>
      <UiSeparator v-bind="args" orientation="vertical" />
      <span>About</span>
      <UiSeparator v-bind="args" orientation="vertical" />
      <span>Contact</span>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: verticalTemplateSource,
      },
    },
  },
};

const cardTemplateSource = `<script setup lang="ts">
import { UiSeparator } from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="rounded-lg border p-4">
    <div class="gap-y-1">
      <h4 class="body-14-medium leading-none">Aleph Alpha UI</h4>
      <p class="body-14-regular text-muted-foreground">
        An open-source UI component library.
      </p>
    </div>
    <UiSeparator class="my-4" />
    <div class="flex h-5 items-center gap-x-4 body-14-regular">
      <span>Docs</span>
      <UiSeparator orientation="vertical" />
      <span>Source</span>
      <UiSeparator orientation="vertical" />
      <span>Support</span>
    </div>
  </div>
</template>`;

/**
 * Card with both horizontal and vertical separators.
 */
export const InCard: Story = {
  render: (args) => ({
    components: { UiSeparator },
    setup() {
      return { args };
    },
    template: `<div class="rounded-lg border p-4">
      <div class="gap-y-1">
        <h4 class="body-14-medium leading-none">Aleph Alpha UI</h4>
        <p class="body-14-regular text-muted-foreground">
          An open-source UI component library.
        </p>
      </div>
      <UiSeparator class="my-4" />
      <div class="flex h-5 items-center gap-x-4 body-14-regular">
        <span>Docs</span>
        <UiSeparator orientation="vertical" />
        <span>Source</span>
        <UiSeparator orientation="vertical" />
        <span>Support</span>
      </div>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: cardTemplateSource,
      },
    },
  },
};
