import { Meta, StoryObj } from '@storybook/react-webpack5';
import ListItem from '../listItem';
import List from './List';

export default {
  component: List,
  title: 'Content/List',
  tags: ['autodocs'],
} satisfies Meta<typeof List>;

type Story = StoryObj<typeof List>;

export const Basic: Story = {
  render: (args) => (
    <List {...args}>
      <ListItem
        as={args.as === 'div' ? 'div' : undefined}
        title="First item"
        subtitle="This is the first item."
        media={<ListItem.AvatarView />}
      />
      <ListItem
        as={args.as === 'div' ? 'div' : undefined}
        title="Second item"
        subtitle="This is the second item."
        media={<ListItem.AvatarView />}
      />
    </List>
  ),
};