import * as React from "react";
import { ChevronRight, Search } from "baseui/icon";
import { ListItem, ListItemLabel, ARTWORK_SIZES } from "baseui/list";
import { useStyletron } from "baseui";

export default function Example() {
  const [css] = useStyletron();
  return (
    <ul
      className={css({
        width: "375px",
        paddingLeft: 0,
        paddingRight: 0,
      })}
    >
      <ListItem sublist>
        <ListItemLabel sublist>Label One</ListItemLabel>
      </ListItem>
      <ListItem sublist>
        <ListItemLabel sublist>Label Two</ListItemLabel>
      </ListItem>

      <ListItem
        artwork={Search}
        endEnhancer={() => <ChevronRight title="" />}
        sublist
      >
        <ListItemLabel sublist>Label Three</ListItemLabel>
      </ListItem>
      <ListItem
        artwork={Search}
        artworkSize={ARTWORK_SIZES.SMALL}
        endEnhancer={() => <ChevronRight title="" />}
        sublist
      >
        <ListItemLabel sublist>Label Four</ListItemLabel>
      </ListItem>
      <ListItem
        artwork={Search}
        // Medium is aliased to Small when sublist
        artworkSize={ARTWORK_SIZES.MEDIUM}
        endEnhancer={() => <ChevronRight title="" />}
        sublist
      >
        <ListItemLabel sublist>Label Five</ListItemLabel>
      </ListItem>

      <ListItem
        artwork={Search}
        artworkSize={ARTWORK_SIZES.LARGE}
        endEnhancer={() => <ListItemLabel sublist>Label Six</ListItemLabel>}
        sublist
      >
        <ListItemLabel sublist>Label Six</ListItemLabel>
      </ListItem>
      <ListItem
        artwork={Search}
        artworkSize={ARTWORK_SIZES.LARGE}
        endEnhancer={() => <ListItemLabel sublist>Label Seven</ListItemLabel>}
        sublist
      >
        <ListItemLabel sublist>Label Seven</ListItemLabel>
      </ListItem>
      <ListItem
        artwork={Search}
        artworkSize={ARTWORK_SIZES.LARGE}
        endEnhancer={() => <ListItemLabel sublist>Label Eight</ListItemLabel>}
        sublist
      >
        <ListItemLabel sublist>Label Eight</ListItemLabel>
      </ListItem>
    </ul>
  );
}