import React from 'react'
import PropTypes from 'prop-types'
import { Table, Tag } from 'antd'
import { color } from 'utils'
import styles from './recentSales.less'

const status = {
    1: {
        color: color.green,
        text: 'SALE',
    },
    2: {
        color: color.yellow,
        text: 'REJECT',
    },
    3: {
        color: color.red,
        text: 'TAX',
    },
    4: {
        color: color.blue,
        text: 'EXTENDED',
    },
}

function RecentSales ({ data }) {
    const columns = [
        {
            title: 'NAME',
            dataIndex: 'name',
        }, {
            title: 'STATUS',
            dataIndex: 'status',
            render: text => <Tag color={status[text].color}>{status[text].text}</Tag>,
        }, {
            title: 'DATE',
            dataIndex: 'date',
            render: text => new Date(text).format('yyyy-MM-dd'),
        }, {
            title: 'PRICE',
            dataIndex: 'price',
            render: (text, it) => <span style={{ color: status[it.status].color }}>${text}</span>,
        },
    ]
    return (
        <div className={styles.recentsales}>
            <Table pagination={false} columns={columns} rowKey={(record, key) => key} dataSource={data.filter((item, key) => key < 5)} />
        </div>
    )
}

RecentSales.propTypes = {
    data: PropTypes.array,
}

export default RecentSales
