// components/LineChart.js
'use client';
import { useEffect } from 'react';
import ApexCharts from 'apexcharts';

const LineChart = () => {
  useEffect(() => {
    const chartThreeOptions = {
      series: [
        {
          name: "Sales",
          data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
        },
        {
          name: "Revenue",
          data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
        },
      ],
      legend: {
        show: false,
        position: "top",
        horizontalAlign: "left",
      },
      colors: ["#465FFF", "#9CB9FF"],
      chart: {
        fontFamily: "Outfit, sans-serif",
        height: 310,
        type: "area",
        toolbar: {
          show: false,
        },
        animations: {
          enabled: true,
          easing: 'easeinout',
          speed: 800,
        },
      },
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.55,
          opacityTo: 0,
          stops: [0, 90, 100],
        },
      },
      stroke: {
        curve: "straight",
        width: [2, 2],
        dashArray: [0, 0],
      },
      markers: {
        size: 0,
        hover: {
          size: 5,
        }
      },
      labels: {
        show: false,
        position: "top",
      },
      grid: {
        borderColor: "#F1F1F1",
        xaxis: {
          lines: {
            show: false,
          },
        },
        yaxis: {
          lines: {
            show: true,
          },
        },
      },
      dataLabels: {
        enabled: false,
      },
      tooltip: {
        enabled: true,
        x: {
          format: "MMM yyyy",
        },
        y: {
          formatter: function(val) {
            return "$" + val;
          }
        },
        marker: {
          show: true,
        },
      },
      xaxis: {
        type: "category",
        categories: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        axisBorder: {
          show: false,
        },
        axisTicks: {
          show: false,
        },
        tooltip: {
          enabled: false,
        },
        labels: {
          style: {
            colors: "#6B7280",
            fontSize: "12px",
            fontFamily: "Outfit, sans-serif",
          }
        }
      },
      yaxis: {
        title: {
          text: "Amount ($)",
          style: {
            color: "#6B7280",
            fontSize: "12px",
            fontFamily: "Outfit, sans-serif",
          }
        },
        labels: {
          formatter: function(val) {
            return "$" + val;
          },
          style: {
            colors: "#6B7280",
            fontSize: "12px",
            fontFamily: "Outfit, sans-serif",
          }
        }
      },
    };

    const chart = new ApexCharts(document.querySelector("#chartThree"), chartThreeOptions);
    chart.render();

    return () => {
      chart.destroy();
    };
  }, []);

  return <div id="chartThree" />;
};

export default LineChart;