import React from 'react';
import { ResponsiveLine } from '@nivo/line';

function LineChart({ data }: any) {
  return (
    <div>
      <div className="h-[500px]">
        <ResponsiveLine
          data={data}
          margin={{ top: 50, right: 30, bottom: 50, left: 60 }}
          xScale={{ type: 'linear' }}
          yScale={{
            type: 'linear',
            // stacked: true,
            min: 0,
            max: 100,
          }}
          yFormat=" >-.2f"
          curve="monotoneX"
          axisTop={null}
          axisRight={null}
          axisBottom={{
            // tickValues: [0, 20, 40, 60, 80, 100, 120],
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            // format: '.2f',
            // legend: 'price',
            // legendOffset: 36,
            // legendPosition: 'middle',
          }}
          axisLeft={{
            // tickValues: [0, 500, 1000, 1500, 2000, 2500],
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            // format: '.2s',
            // legend: 'volume',
            // legendOffset: -40,
            // legendPosition: 'middle',
          }}
          enableGridX={false}
          colors={{ scheme: 'spectral' }}
          lineWidth={1}
          pointSize={0}
          pointColor={{ theme: 'background' }}
          pointBorderWidth={1}
          pointBorderColor={{ from: 'serieColor' }}
          pointLabelYOffset={-12}
          useMesh={true}
          //   gridXValues={[0, 20, 40, 60, 80, 100, 120]}
          //   gridYValues={[0, 500, 1000, 1500, 2000, 2500]}
          legends={[]}
        />

        {/* <ResponsiveLine
          data={data}
          margin={{ top: 50, right: 20, bottom: 50, left: 60 }}
          xScale={{ type: 'point' }}
          yScale={{
            type: 'linear',
            min: 'auto',
            max: 'auto',
            stacked: true,
            reverse: false,
          }}
          yFormat=" >-.2f"
          axisTop={null}
          axisRight={null}
          axisBottom={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            // legend: 'transportation',
            // legendOffset: 36,
            // legendPosition: 'middle',
          }}
          axisLeft={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            // legend: 'count',
            // legendOffset: -40,
            // legendPosition: 'middle',
          }}
          pointSize={1}
          pointColor={{ theme: 'background' }}
          pointBorderWidth={2}
          pointBorderColor={{ from: 'serieColor' }}
          pointLabelYOffset={-12}
          useMesh={true}
          legends={[]}
        /> */}
      </div>
    </div>
  );
}

export default LineChart;