// 'use client'
import type { Meta, StoryObj } from "@storybook/react";
import MultiSelectDropdown, { Option } from "./MultiSelectDropdown";
import { useState } from "react";

const yourData: Option[] = [
  { id: 1, value: "Option 1" },
  { id: 2, value: "Option 2" },
  { id: 3, value: "Option 3" },
];

interface MultiSelectDropdownStoryProps {
}

const MultiSelectDropdownStory: React.FC<MultiSelectDropdownStoryProps> = () => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);

  
  const handleSelect = (selectedItems: Option[]) => {
    console.log("Selected Items:", selectedItems);
  };

  return (
    <>
      <MultiSelectDropdown data={yourData} onSelect={handleSelect} />
    </>
  );
};

const meta: Meta<typeof MultiSelectDropdown> = {
  title: "DROPDOWN/MultiSelectDropDown",
  component: MultiSelectDropdown,
  render: (args) => <MultiSelectDropdown {...args} />, 
};

export default meta;

type Story = StoryObj<typeof MultiSelectDropdown>;

export const Default: Story = {
  args: {
    size: 'default',
    outlineVariant: 'default',
  },
};

export const Primary: Story = {
  args: {
    size: 'sm',
    outlineVariant: 'primary',
  },
};

export const Custom: Story = {
  args: {
    size: 'lg',
  },
};
