import dynamic from 'next/dynamic';
import { useState } from 'react';

// Dynamically import the chart component with SSR disabled
const Chart = dynamic(() => import('react-apexcharts'), {
  ssr: false,
});

const ReportChart = () => {
  const [chartData] = useState({
    options: {
      chart: {
        id: 'apexchart-example',
      },
      xaxis: {
        categories: [
          'Jan',
          'Feb',
          'Mar',
          'April',
          'May',
          'July',
          'Aug',
          'Sep',
          'Oct',
          'Nov',
          'Dec',
        ],
      },
      yaxis: {
        labels: {
          formatter: (value: number) => {
            const months = ['$0', '$2k', '$4k', '$6k', '$8k', '$10k', '$12k'];
            return months[value - 1] || ''; // Ensure it doesn't break for out-of-range values
          },
        },
      },
      colors: ['rgba(56, 124, 68, 0.60)'],
      dataLabels: { enabled: false },
    },
    series: [
      {
        name: 'series-1',
        data: [1, 2, 2, 3, 4, 4, 5, 6, 6],
      },
    ],

  });

  return (
    <Chart
      options={chartData.options}
      series={chartData.series}
      type="bar"
      width={'100%'}
      height={320}
    />
  );
};

export default ReportChart;