import type { Meta, StoryObj } from "@storybook/vue3-vite";
import StatusBadge from "./StatusBadge.vue";

const meta: Meta<typeof StatusBadge> = {
  title: "Map/StatusBadge",
  component: StatusBadge,
  tags: ["autodocs"],
  argTypes: {
    status: { control: { type: "select" }, options: ["ok", "warn", "error", "idle", "live"] },
  },
};
export default meta;

type Story = StoryObj<typeof StatusBadge>;

export const Default: Story = {
  args: { status: "ok", label: "Healthy" },
};

export const All: Story = {
  render: () => ({
    components: { StatusBadge },
    template: `
      <div class="flex flex-col gap-2 bg-zinc-900 p-4">
        <StatusBadge status="ok" label="Healthy" />
        <StatusBadge status="live" label="Streaming" pulse />
        <StatusBadge status="warn" label="Degraded" />
        <StatusBadge status="error" label="Unreachable" />
        <StatusBadge status="idle" label="Idle" />
      </div>
    `,
  }),
};