'use client'

import type { ApexOptions } from 'apexcharts'
import React from 'react'
import { Chart, type ChartProps } from '../Chart'
import { mergeChartOptions } from '../chart.config'

type AreaChartProps = Omit<ChartProps, 'type'> & {
  stacked?: boolean
}

const areaChartOptions: ApexOptions = {
  fill: {
    type: 'gradient',
    gradient: {
      opacityFrom: 0.7,
      opacityTo: 0.5,
      stops: [0, 100],
      gradientToColors: ['var(--background)'],
    },
  },
}

export const AreaChart = ({
  stacked = false,
  options = {},
  ...props
}: AreaChartProps) => {
  const mergedOptions = React.useMemo(
    () => mergeChartOptions(areaChartOptions, { chart: { stacked } }, options),
    [stacked, options],
  )

  return <Chart type="area" options={mergedOptions} {...props} />
}