// components/charts/chart-01.jsx
'use client';
import { useEffect } from 'react';
import ApexCharts from 'apexcharts';

const Chart01 = () => {
  useEffect(() => {
    const chartOneOptions = {
      series: [
        {
          name: "Sales",
          data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
        },
      ],
      colors: ["#465fff"],
      chart: {
        fontFamily: "Outfit, sans-serif",
        type: "bar",
        height: 180,
        toolbar: {
          show: false,
        },
        animations: {
          enabled: true,
          easing: 'easeinout',
          speed: 800,
        },
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "39%",
          borderRadius: 5,
          borderRadiusApplication: "end",
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        show: true,
        width: 4,
        colors: ["transparent"],
      },
      xaxis: {
        categories: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        axisBorder: {
          show: false,
        },
        axisTicks: {
          show: false,
        },
        labels: {
          style: {
            colors: "#6B7280",
            fontSize: "12px",
            fontFamily: "Outfit, sans-serif",
          }
        }
      },
      legend: {
        show: true,
        position: "top",
        horizontalAlign: "left",
        fontFamily: "Outfit, sans-serif",
        markers: {
          radius: 12,
        },
        itemMargin: {
          horizontal: 10,
        }
      },
      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",
          }
        }
      },
      grid: {
        borderColor: "#F1F1F1",
        yaxis: {
          lines: {
            show: true,
          },
        },
        xaxis: {
          lines: {
            show: false,
          },
        },
      },
      fill: {
        opacity: 1,
      },
      tooltip: {
        y: {
          formatter: function(val) {
            return "$" + val;
          }
        }
      },
    };

    const chart = new ApexCharts(document.querySelector("#chartOne"), chartOneOptions);
    chart.render();

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

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

export default Chart01;