import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

type ConfigGrafico = {
  options: ApexOptions;
  series: ApexAxisChartSeries | ApexNonAxisChartSeries;
};

type FormatadorGrafico = {
  [key: string]: (dados: any) => ConfigGrafico;
};

type TiposGrafico = "Pizza" | "Barra" | "Linha";

const Grafico = ({
  tipo,
  formatar,
  dados,
}: {
  [key: string]: any;
  formatar: any;
  tipo: TiposGrafico;
}) => {
  const dadosGrafico = formatar[tipo](dados);

  return (
    <div className="relative transform-none">
      <Chart
        options={dadosGrafico.options}
        series={dadosGrafico.series}
        type={dadosGrafico.options.chart!.type}
        height={400}
      />
    </div>
  );
};

export default Grafico;
export type { FormatadorGrafico, TiposGrafico };