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

const meta = {
  title: "Elements/OptionSelect/SelectOption",
  component: SelectOption,
  tags: ["autodocs"],
  args: {
    label: "Field label",
    placeholder: "Select…",
    options: [
      { label: "One", value: "1" },
      { label: "Two", value: "2" },
      { label: "Three", value: "3" },
    ],
  },
  parameters: componentDoc("SelectOption", { barrel: "option-select" }),
} satisfies Meta<typeof SelectOption>

export default meta
type Story = StoryObj<typeof meta>

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

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

export const Disabled: Story = {
  args: { label: "Disabled", disabled: true, modelValue: "1" },
}

export const WithHelpText: Story = {
  args: {
    label: "Country",
    helpText: "Choose your country of residence.",
  },
}

export const WithErrors: Story = {
  args: {
    label: "Role",
    errors: ["Please choose a role."],
  },
}

export const HiddenLabel: Story = {
  args: { label: "Hidden", hideLabel: true },
}

export const StringOptions: Story = {
  args: {
    label: "String options",
    options: ["alpha", "beta", "gamma"],
  },
}
