import type { Meta, StoryObj } from '@storybook/react';
import MenuOption from './MenuOption';

const meta: Meta<typeof MenuOption> = {
  title: 'Components/MenuOption',
  component: MenuOption,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

type Story = StoryObj<typeof MenuOption>;

export const DefaultMenuOption: Story = {
  args: {
    iconName: 'impact_list_icon',
    options: [
      {
        label: 'StepGroup',
        value: [],
        chipText: 'SG 0',
        disable: true,
      },
      {
        label: 'Script',
        value: ['SCR101', 'SCR102'],
        chipText: 'S 2',
      },
    ],
    isChipRequired: true,
  },
};

export const MenuOptionWithLabel: Story = {
  args: {
    labelName: 'ImpactList',
    iconName: 'impact_list_icon',
    options: [
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
    ],
  },
};

export const MenuOptionWithToolTip: Story = {
  args: {
    labelName: 'ImpactList',
    iconName: 'impact_list_icon',
    tooltipTitle: 'Impact List',
    placement: 'bottom',
    options: [
      {
        label: 'Option1',
        value: 'opt1',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
      {
        label: 'Option2',
        value: 'opt2',
      },
    ],
  },
};

export default meta;