import { useMemo } from 'react';
import Chart from 'react-apexcharts';

export const AreaChart = ({
  series = [],
  categories = [],
  title = '',
  height = 350,
  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
  showLegend = true,
  showToolbar = true,
  className = '',
  ...props
}) => {
  const chartOptions = useMemo(() => ({
    chart: {
      type: 'area',
      height: height,
      toolbar: {
        show: showToolbar,
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true,
        },
      },
    },
    colors: colors,
    stroke: {
      curve: 'smooth',
      width: 2,
    },
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.7,
        opacityTo: 0.3,
        stops: [0, 90, 100],
      },
    },
    xaxis: {
      categories: categories,
      labels: {
        style: {
          colors: '#6B7280',
        },
      },
    },
    yaxis: {
      labels: {
        style: {
          colors: '#6B7280',
        },
      },
    },
    legend: {
      show: showLegend,
      position: 'top',
      horizontalAlign: 'center',
    },
    grid: {
      borderColor: '#E5E7EB',
      strokeDashArray: 4,
    },
    tooltip: {
      theme: 'light',
    },
    dataLabels: {
      enabled: false,
    },
  }), [categories, colors, height, showLegend, showToolbar]);

  return (
    <div className={className}>
      {title && (
        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      )}
      <Chart
        options={chartOptions}
        series={series}
        type="area"
        height={height}
        {...props}
      />
    </div>
  );
};

export default AreaChart;

