import { MultiSelect } from "@components/MultiSelect/MultiSelect";
import type { Meta, StoryObj } from "@storybook/react";


const meta = {
    title: "Example/MultiSelect",
    component: MultiSelect,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
    argTypes: {
        color: {
            defaultValue: "primary",
        },
    },
} satisfies Meta<typeof MultiSelect>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
    args: {
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        label: "Select",
        width: "300px",
    },
};


export const Small: Story = {
    args: {
        label: "Select",
        size: "small",
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },
};

export const DefaultValue: Story = {
    args: {
        label: "Select",
        defaultValue: ["Omar Alexander"],
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },

};



export const Filled: Story = {
    args: {
        label: "Select",
        variant: "filled",
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },
};

export const Standard: Story = {
    args: {
        label: "Select",
        variant: "standard",
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },
};

export const Color: Story = {
    args: {
        label: "Select",
        value: ["TAG1"],
        color: "warning",
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },
};

export const Disabled: Story = {
    args: {
        label: "Select",
        value: ["TAG1"],
        disabled: true,
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },
};

export const ReadOnly: Story = {
    args: {
        label: "Select",
        value: ["TAG1"],
        readOnly: true,
        options: ["TAG1", "TAG2", "TAG3", "TAG4", "TAG5"],
        width: "300px",
    },
};