import { lazy, Suspense } from 'react';

import Box from '@mui/material/Box';

import { ChartLoading } from './chart-loading';

const ApexChart = lazy(() => import('react-apexcharts').then((mod) => ({ default: mod.default })));

// ----------------------------------------------------------------------

export function Chart({
  sx,
  type,
  series,
  height,
  options,
  loadingProps,
  width = '100%',
  ...other
}) {
  return (
    <Box
      dir="ltr"
      sx={{
        width,
        height,
        flexShrink: 0,
        borderRadius: 1.5,
        position: 'relative',
        ...sx,
      }}
      {...other}
    >
      <Suspense
        fallback={
          loadingProps?.disabled ? null : (
            <ChartLoading type={type} sx={loadingProps?.sx} />
          )
        }
      >
        <ApexChart
          type={type}
          series={series}
          options={options}
          width="100%"
          height="100%"
        />
      </Suspense>
    </Box>
  );
}