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

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

const SingleSelectDropdownStory: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState<{
    id: any;
    value: any;
  } | null>(null);

  const handleSelect = (selectedItem: { id: any; value: string }) => {
    setSelectedOption(selectedItem);
  };

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

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

export default meta;

type Story = StoryObj<typeof SingleSelectDropdown>;

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'
  },
};
