import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./Search.Story.svelte";

export default { title: "Search", decorators: [withKnobs] };

const sizes = {
  "Regular size (xl)": "xl",
  "Large size (lg)": "lg",
  "Small size (sm)": "sm",
};

export const Default = () => ({
  Component,
  props: {
    size: select("Size (size)", sizes, "xl"),
    light: boolean("Light variant (light)", false),
    name: text("Form item name (name)", ""),
    labelText: text("Label text (labelText)", "Search"),
    closeButtonLabelText: text(
      "The label text for the close button (closeButtonLabelText)",
      "Clear search input"
    ),
    placeholder: text("Placeholder text (placeholder)", "Search"),
  },
});

export const Skeleton = () => ({ Component, props: { story: "skeleton" } });