import type { Meta, StoryObj } from "@storybook/vue3-vite"
import MarkdownDisplay from "./MarkdownDisplay.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Display/MarkdownDisplay",
  component: MarkdownDisplay,
  tags: ["autodocs"],
  args: {
    value: "# Hello\n\nThis is **markdown**.",
  },
  parameters: componentDoc("MarkdownDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-prose p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof MarkdownDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { value: "# Hello\n\nThis is **markdown**." },
}

export const WithCustomContent: Story = {
  args: {
    value:
      "## Custom\n\n- One\n- Two\n- Three\n\n[Click me](https://example.com)\n\n`inline code` here.",
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { MarkdownDisplay },
    template: `
      <div class="flex flex-col gap-6">
        <MarkdownDisplay value="# Heading 1\\n\\n## Heading 2\\n\\nParagraph text with **bold** and *italic*." />
        <MarkdownDisplay value="- bullet\\n- another bullet\\n\\n1. one\\n2. two" />
      </div>
    `,
  }),
}
