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

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

type Story = StoryObj<typeof FilterInput>;

export const Empty: Story = {
  args: { modelValue: "", placeholder: "filter…" },
  render: (args) => ({
    components: { FilterInput },
    setup() {
      const value = ref(args.modelValue);
      return { args, value };
    },
    template: `<FilterInput v-bind="args" v-model="value" /><p class="mt-3 text-xs text-zinc-500">value: <code>{{ value }}</code></p>`,
  }),
};

export const WithValue: Story = {
  args: { modelValue: "moderation", placeholder: "filter by name, module, app…" },
};

export const Compact: Story = {
  args: { modelValue: "", placeholder: "filter routes…", compact: true },
};