import type { Meta, StoryObj } from "@storybook/vue3-vite";
import { Network, GitBranch, Database } from "lucide-vue-next";
import EmptyState from "./EmptyState.vue";

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

type Story = StoryObj<typeof EmptyState>;

export const TitleOnly: Story = {
  args: { title: "No routes in cache" },
};

export const WithHint: Story = {
  args: {
    title: "No routes in cache",
    hint: "Routes are wired in app code via httpInterface().wire(...). Run `nwire cache` after adding one.",
    icon: Network,
  },
};

export const Workflows: Story = {
  args: {
    title: "No workflows in cache",
    hint: "Workflows are declared via defineWorkflow(name, ({ on, send }) => ...).",
    icon: GitBranch,
  },
};

export const WithAction: Story = {
  args: {
    title: "Cache is empty",
    hint: "Run nwire cache to populate the manifest.",
    icon: Database,
  },
  render: (args) => ({
    components: { EmptyState },
    setup: () => ({ args }),
    template: `
      <EmptyState v-bind="args">
        <template #actions>
          <button class="text-xs px-3 py-1.5 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-100">
            Rebuild cache
          </button>
        </template>
      </EmptyState>
    `,
  }),
};