import type { Meta, StoryObj } from "@storybook/vue3-vite";
import { Network, Zap, Globe, Lock } from "lucide-vue-next";
import ListRow from "./ListRow.vue";
import KindBadge from "./KindBadge.vue";

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

type Story = StoryObj<typeof ListRow>;

export const Resolver: Story = {
  render: () => ({
    components: { ListRow, KindBadge, Network },
    template: `
      <div class="bg-zinc-950 border border-zinc-800 rounded w-[480px]">
        <ListRow>
          <template #title>
            <Network class="w-3 h-3 text-rose-400 shrink-0" />
            <span class="font-mono text-sm">moderation.SubmitPost</span>
            <span class="text-[10px] text-zinc-500 font-mono">v1</span>
          </template>
          <template #meta>
            <KindBadge variant="active">active</KindBadge>
            <span class="text-[10px] text-zinc-500">moderation-queue</span>
          </template>
          <template #description>Marta submits a post for review.</template>
        </ListRow>
      </div>
    `,
  }),
};

export const ActionWithVisibility: Story = {
  render: () => ({
    components: { ListRow, Zap, Globe, Lock },
    template: `
      <div class="bg-zinc-950 border border-zinc-800 rounded w-[480px]">
        <ListRow selected>
          <template #title>
            <Zap class="w-3 h-3 text-amber-400 shrink-0" />
            <span class="font-mono text-sm">moderation.submit-post</span>
          </template>
          <template #meta>
            <Globe class="w-3 h-3 text-emerald-400" />
            <span class="text-[10px] text-zinc-500">moderation-queue</span>
          </template>
          <template #description>Marta sends a freshly-written post for human review.</template>
        </ListRow>
      </div>
    `,
  }),
};