import dynamic from "next/dynamic";
import useLanguage from "@/lib/app/hooks/useLanguage";
import ReactDOMServer from 'react-dom/server';
import WidgetsIcon from '@mui/icons-material/Widgets';

const widgetIconSvgString = ReactDOMServer.renderToString(<WidgetsIcon/>);

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

const Chart = ({chartId, type, series, specialOption}) => {
    const {languageApp, languageList} = useLanguage();
    const chartLang = languageList.find((item) => item.key == languageApp).chartLocalization
    const options = {
        chart: {
            id: chartId,
            offsetY: -30,
            locales: [chartLang],
            defaultLocale: languageApp,
            fontFamily: languageList[0].fontFamily,
            toolbar: {
                tools: {
                    zoomIn: false,
                    zoomOut: false,
                    download: widgetIconSvgString,
                }
            }
        },
        ...(specialOption ? specialOption : {})
    }
    return <ApexChart type={type} options={options} series={series}/>
};

export default Chart;