import type { Meta, StoryObj } from "@storybook/vue3-vite"
import IconPickerInline from "./IconPickerInline.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Picker/IconPickerInline",
  component: IconPickerInline,
  tags: ["autodocs"],
  parameters: componentDoc("IconPickerInline", { deep: "components/compositions/elements/picker/IconPickerInline.vue" }),
  decorators: [
    () => ({
      template: '<div class="max-w-md p-4"><story /></div>',
    }),
  ],
  args: {
    label: "Pick an icon",
  },
} satisfies Meta<typeof IconPickerInline>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Pick an icon" },
}

export const WithInitialValue: Story = {
  args: { label: "Pick an icon", modelValue: "Star" },
}

export const Required: Story = {
  args: { label: "Pick an icon", required: true },
}

export const Disabled: Story = {
  args: { label: "Pick an icon", disabled: true, modelValue: "Bell" },
}

export const WithHelpText: Story = {
  args: {
    label: "Status icon",
    helpText: "Choose an icon from the curated list.",
  },
}

export const WithErrors: Story = {
  args: {
    label: "Pick an icon",
    errors: ["An icon is required."],
  },
}
