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

const meta = {
  title: "Elements/Display/BannerDisplay",
  component: BannerDisplay,
  tags: ["autodocs"],
  args: {
    title: "Heads up",
    value: "This is a static banner message.",
  },
  parameters: componentDoc("BannerDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-xl p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof BannerDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { title: "Heads up", value: "This is a static banner message." },
}

export const WithCustomContent: Story = {
  args: {
    title: "Reminder",
    value: "Don't forget to publish before the deadline.",
  },
}

export const Destructive: Story = {
  args: {
    title: "Error",
    value: "Something went wrong.",
    variant: "destructive",
  },
}

export const Success: Story = {
  args: {
    title: "Saved",
    value: "Your changes were saved.",
    variant: "success",
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { BannerDisplay },
    template: `
      <div class="flex flex-col gap-3">
        <BannerDisplay title="Info" value="Informational message." />
        <BannerDisplay title="No description" />
      </div>
    `,
  }),
}
