'use client';

import { LineChart, lineElementClasses } from "@mui/x-charts"

function Chart({ data, loading }) {
    return (
        <LineChart
            loading={loading}
            xAxis={[{
                data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
                disableLine: true,
                disableTicks: true,
            }]}
            series={[
                {
                    id: 'income',
                    data: data.chart_amount_income,
                    area: true,
                    showMark: false,
                },
            ]}
            yAxis={[{
                disableLine: true,
                disableTicks: true
            }]}
            margin={{
                left: 60,
                right: 50,
                top: 10,
                bottom: 60,
            }}
            sx={{
                [`& .${lineElementClasses.root}`]: {
                    strokeWidth: 3,
                    stroke: loading ? '#E6E6E6' : '#5559CE'
                },
                '& .MuiAreaElement-series-income': {
                    fill: "url('#myGradient') !important",
                },
                '& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel': {
                    fontSize: '14px !important',
                    fontWeight: '400 !important',
                    fill: '#858D9D'
                },
                '& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel': {
                    fontSize: '10px !important',
                    fontWeight: '400 !important',
                    fill: '#7E7E7E'
                },
                '& .MuiChartsGrid-line': {
                    strokeDasharray: 2
                },
                '& .MuiChartsAxis-directionY': {
                    // transform: 'translateX(-50px) !important'
                }
            }}
            grid={{ horizontal: true }}
            className='!w-full !mt-[20px] !h-[250px]'
        >
            <defs>
                <linearGradient id="myGradient" x1="252.5" y1="0" x2="252.5" y2="145" gradientUnits="userSpaceOnUse">
                    <stop stopColor="#3A6FF8" stopOpacity="0.1" />
                    <stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
                </linearGradient>
            </defs>
        </LineChart>
    )
}

export default Chart