import preview from "../../.storybook/preview.tsx";
import { ListItem, ListView } from "./ListView.tsx";

const meta = preview.meta({
  title: "Components/ListView",
  component: ListView,
});

export const Default = meta.story({
  args: {
    children: (
      <>
        <ListItem heading="Item 1" summary="Summary for item 1" />
        <ListItem heading="Item 2" summary="Summary for item 2" type="Type" />
        <ListItem
          heading="Item 2"
          summary="Summary for item 2"
          type="Type"
          aside={
            <svg width="40" height="40" viewBox="0 0 40 40">
              <rect width="40" height="40" fill="rebeccapurple" />
              <circle cx="20" cy="20" r="10" fill="white" />
            </svg>
          }
        />
      </>
    ),
    fallback: "Empty",
  },
});

export const Empty = meta.story({
  args: {
    fallback: "This list is empty",
  },
});