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

const meta = {
  title: "Elements/OptionSelect/PillSelectOption",
  component: PillSelectOption,
  tags: ["autodocs"],
  args: {
    label: "Tags",
    options: [
      { label: "Vue", value: "vue" },
      { label: "React", value: "react" },
      { label: "Svelte", value: "svelte" },
      { label: "Solid", value: "solid" },
    ],
  },
  parameters: componentDoc("PillSelectOption", { barrel: "option-select" }),
} satisfies Meta<typeof PillSelectOption>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Tags" },
}

export const Preselected: Story = {
  args: { label: "Tags", modelValue: ["vue", "svelte"] },
}

export const Disabled: Story = {
  args: { label: "Disabled", disabled: true, modelValue: ["vue"] },
}

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

export const WithHelpText: Story = {
  args: { label: "Tags", helpText: "Pick all that apply." },
}

export const WithErrors: Story = {
  args: { label: "Tags", errors: ["Pick at least one."] },
}
