// @flow
import React from 'react';
import { ListItem } from '.';
import { Button, Checkmark, NumberedBullet } from '../../core';
import { Box } from '../../primitives/box';
import docs from './list-item.mdx';

export default {
  title: 'One-off/ListItem',
  component: ListItem,
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const Header = 'Whatever you want in the header.';
const Body = 'Whatever you want in the body';
const subComponent = (
  <Button onClick={() => {}} size="sm">
    click me
  </Button>
);

export const Checklist = () => (
  <Box>
    <ListItem icon={<Checkmark />} header={Header} body={Body} />
    <ListItem
      icon={<Checkmark />}
      header={Header}
      body={Body}
      subComponent={subComponent}
    />
    <ListItem icon={<Checkmark />} header={Header} body={Body} />
  </Box>
);

export const NumberedList = () => (
  <Box>
    <ListItem icon={<NumberedBullet value="1" />} header={Header} body={Body} />
    <ListItem
      icon={<NumberedBullet value="2" />}
      header={Header}
      body={Body}
      subComponent={subComponent}
    />
    <ListItem
      icon={<NumberedBullet value="3" disabled />}
      header={Header}
      body={Body}
    />
  </Box>
);
