"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;