import type { Meta, StoryObj } from "@storybook/vue3-vite";
import KpiTile from "./KpiTile.vue";
import { kindColor } from "@/lib/kind-colors";

const meta: Meta<typeof KpiTile> = {
  title: "Map/KpiTile",
  component: KpiTile,
  tags: ["autodocs"],
};
export default meta;

type Story = StoryObj<typeof KpiTile>;

export const Default: Story = {
  args: { label: "Actions", value: 12, sub: "3 public" },
};

export const Strip: Story = {
  render: () => ({
    components: { KpiTile },
    setup: () => ({ kindColor }),
    template: `
      <div class="flex gap-3 bg-zinc-900 p-4">
        <KpiTile label="Apps" :value="2" />
        <KpiTile label="Actions" :value="12" :accent="kindColor('action')" />
        <KpiTile label="Events" :value="8" :accent="kindColor('event')" />
        <KpiTile label="Queries" :value="5" :accent="kindColor('query')" />
        <KpiTile label="Workflows" :value="1" :accent="kindColor('workflow')" />
      </div>
    `,
  }),
};