import { Meta, StoryObj } from '@storybook/react-webpack5';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
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 Sandbox = createSandboxStory({
  code: `<List>
  <ListItem
    title="First item"
    subtitle="This is the first item."
    media={<ListItem.AvatarView />}
    control={<ListItem.Navigation onClick={() => console.log('navigate')} />}
  />
  <ListItem
    title="Second item"
    subtitle="This is the second item."
    media={<ListItem.AvatarView />}
    control={<ListItem.Navigation onClick={() => console.log('navigate')} />}
  />
</List>`,
  scope: { ...globalScope, 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>
  ),
};
