import React from 'react';
import { useState } from 'react';

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

export const TableExample = () => {
    const [open, setOpen] = useState(false);

    function confirm() {
        setOpen(!open)
    }

    return (
        <div>
            <Box width={700} height={500}>
                <h4>Transactions</h4>
                <Table
                    columns={[
                        {
                            header: 'Type',
                            accessor: 'type',
                            index: true
                        },
                        {
                            header: 'Payment id',
                            accessor: 'paymentId',
                        },
                        {
                            header: 'Amount',
                            accessor: 'amount',
                        },
                        {
                            header: 'Status',
                            accessor: 'status',
                        }
                    ]}

                    data={[
                        {
                            type: 'deposit',
                            paymentId: '465aorbb4u0ayd8',
                            amount: 1500,
                            status: { 
                                text: 'Pending',
                                color: '#FFBD44'
                            }
                        },
                        {
                            type: 'deposit',
                            paymentId: 'yte45259ctebdoa',
                            amount: 6500,
                            status: {
                                text: 'Complete',
                                color: '#5BE2A7'
                            }
                        },
                        {
                            type: 'withdrawal',
                            paymentId: 'qdovgh2312bdvudd',
                            amount: 3000,
                            status: {
                                text: 'Cancelled',
                                color: '#FF605C'
                            }
                        },
                        {
                            type: 'deposit',
                            paymentId: 'czneiei7w94nvnv',
                            amount: 1000,
                            status: {
                                text: 'Complete',
                                color: '#5BE2A7'
                            }
                        },
                    ]}
                />
            </Box>
        </div>
    );
}