"use client";

import dynamic from "next/dynamic";
import type { CSSProperties } from "react";

const ReactECharts = dynamic(() => import("echarts-for-react"), { ssr: false });

interface Props {
  option: Record<string, unknown>;
  height?: number;
  style?: CSSProperties;
  loading?: boolean;
  notMerge?: boolean;
}

export function ChartShell({
  option,
  height = 320,
  style,
  loading,
  notMerge,
}: Props) {
  return (
    <div style={{ width: "100%", height, ...style }}>
      <ReactECharts
        option={option}
        style={{ height: "100%", width: "100%" }}
        showLoading={loading}
        notMerge={notMerge}
      />
    </div>
  );
}
