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

const meta = {
  title: "Elements/Display/HtmlDisplay",
  component: HtmlDisplay,
  tags: ["autodocs"],
  args: {
    value: "<p>This is <strong>raw HTML</strong>.</p>",
  },
  parameters: componentDoc("HtmlDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-prose p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof HtmlDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { value: "<p>This is <strong>raw HTML</strong>.</p>" },
}

export const WithCustomContent: Story = {
  args: {
    value:
      "<h2>Trusted content</h2><p>Pre-sanitised on the server, rendered as-is here.</p>",
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { HtmlDisplay },
    template: `
      <div class="flex flex-col gap-4">
        <HtmlDisplay value="<p>First paragraph.</p>" />
        <HtmlDisplay value="<ul><li>One</li><li>Two</li></ul>" />
      </div>
    `,
  }),
}
