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

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { progress: 50, label: "Setup progress" },
}

export const WithCustomContent: Story = {
  args: { progress: 87, label: "Almost done" },
}

export const Variants: Story = {
  args: {} as never,
  render: () => ({
    components: { ProgressBarDisplay },
    setup() {
      const values = [0, 25, 50, 75, 100]
      return { values }
    },
    template: `
      <div class="flex flex-col gap-3">
        <ProgressBarDisplay
          v-for="v in values"
          :key="v"
          :progress="v"
          :label="'At ' + v + '%'"
        />
      </div>
    `,
  }),
}

export const Showcase: Story = {
  args: { progress: 50, label: "Setup progress" },
}
