import React from 'react';

import { Table } from '../components/Table';

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

const Template = (args) => <div style={{maxWidth: '400px'}}><Table {...args} /></div>;

export const Filled = Template.bind({});
Filled.args = {
    width: 900,
    height: 300,
    columns: [
        {
            header: 'First name',
            accessor: 'first',
            index: true
        },
        {
            header: 'Last name',
            accessor: 'last',
        },
        {
            header: 'Email',
            accessor: 'email'
        },
        {
            header: 'Age',
            accessor: 'age'
        }
    ],
    data: [
        {
            first: 'John',
            last: 'Doe',
            email: 'johndoe@gmail.com',
            age: 24
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69
        },
        {
            first: 'Mike',
            last: 'Wazovski',
            email: 'mikewazovski@gmail.com',
            age: 69
        }
    ]
};

export const Empty = Template.bind({});
Empty.args = {
    columns: [
        {
            header: 'First name',
            accessor: 'first'
        },
        {
            header: 'Last name',
            accessor: 'last'
        },
        {
            header: 'Email',
            accessor: 'email'
        }
    ],
    data: [],
    empty: 'No data to be seen'
};

