import React, { useEffect, useState, useMemo } from 'react';
import { StoryObj, Meta } from '@storybook/react';
import List from './List';

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

type Story = StoryObj<typeof List>;
const sampleData = [
  {
    text: 'Open chrome browser',
    iconName: 'passed',
  },
  {
    text: 'Maximize browser window',
    iconName: 'passed',
  },
  {
    text: 'Navigate to URL (www.fireflink.com)',
    iconName: 'passed',
    disable: true,
  },
  {
    text: 'Click on Flights Dropdown',
    iconName: 'cancel_icon',
  },
];
const listOnClick = (obj: any) => {
  console.log('list object', obj);
};
const defaultArgs = {
  listItems: [],
};

export const Default: Story = {
  args: {
    ...defaultArgs,
    listItems: sampleData,
  },
};
export const ListWithLeftIcon: Story = {
  args: {
    ...defaultArgs,
    listItems: sampleData,
    iconPosition: 'left',
    onListItemClick: listOnClick,
    textMaxWidth: '50px'
  },
};

export default meta;