import Table from '.';

export default {
  title: 'Core/Table',
  component: Table
};

const Template = args => (
  <Table {...args}>
    <Table.Head>
      <Table.HeadColumn>Name</Table.HeadColumn>
      <Table.HeadColumn>Surname</Table.HeadColumn>
      <Table.HeadColumn>Place of birth</Table.HeadColumn>
      <Table.HeadColumn>Created at</Table.HeadColumn>
    </Table.Head>
    <Table.Body>
      <Table.Row>
        <Table.Cell>John</Table.Cell>
        <Table.Cell>Doe</Table.Cell>
        <Table.Cell>New York</Table.Cell>
        <Table.Cell>2020-01-01</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Jane</Table.Cell>
        <Table.Cell>Doe</Table.Cell>
        <Table.Cell>Los Angeles</Table.Cell>
        <Table.Cell>2020-01-01</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>John</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>Chicago</Table.Cell>
        <Table.Cell>2020-01-01</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
);

export const Simple = Template.bind({});

export const NoBorderBottom = Template.bind({});
NoBorderBottom.args = {
  noBorderBottom: true
};