import React, { Fragment, useState } from 'react'
import { Grid, Card } from '@material-ui/core'
import CustomLineChart from './shared/CustomLineChart'
import StatCards from './shared/StatCards'
import { useTheme } from '@material-ui/styles'

const box = [
    { id: 1, title: 'Tạo hợp đồng', params: '/add-personal' },
    { id: 2, title: 'Tạo nhân viên', params: '/add-personal' },
    { id: 3, title: 'Tạo nhà phát hành', params: '/add-personal' },
    { id: 3, title: 'Tạo sản phẩm', params: '/add-personal' },
]

const dataLine = [
    {
        id: 1,
        textLeft: 'Khách hàng mới',
        textRight: 'Hợp đồng',
        data: [820, 932, 901, 934, 190, 1330, 1320],
        bg: 'blue',
        height: '300px',
    },
    {
        id: 2,
        textLeft: 'Nhà đầu tư mới',
        textRight: 'Hợp đồng',
        data: [1820, 932, 901, 934, 1290, 130, 1320],
        bg: 'pink',
        height: '300px',
    },
    {
        id: 3,
        textLeft: 'Sản phẩm mới',
        textRight: 'Hợp đồng',
        data: [820, 932, 1901, 934, 1290, 1330, 120],
        bg: 'yellow',
        height: '300px',
    },
]

const Analytics = () => {
    const theme = useTheme()
    const [list] = React.useState(box)
    const [dataChart] = React.useState(dataLine)

    return (
        <div className="analytics m-sm-30">
            <Grid container spacing={3} className="mb-3">
                {dataChart.map((item) => (
                    <Grid item xs={12} md={6} key={item.id}>
                        <Card>
                            <CustomLineChart item={item} />
                        </Card>
                    </Grid>
                ))}

                {/* <Grid item xs={12} md={6}>
                    <StatCards list={list} />
                </Grid> */}
            </Grid>
        </div>
    )
}

export default Analytics
