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

const meta = {
  title: "Elements/Display/ReactiveCanvasDisplay",
  component: ReactiveCanvasDisplay,
  tags: ["autodocs"],
  args: { label: "Live preview" },
  parameters: componentDoc("ReactiveCanvasDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-xl p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof ReactiveCanvasDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Live preview" },
}

export const WithCustomContent: Story = {
  args: { label: "Interactive scene" },
}

export const Showcase: Story = {
  args: { label: "Live preview" },
}
