import type { JSX } from "react"
import type { ChartProps } from "./types"
import { useChart } from "./useChart"

export const Chart = ({
  use,
  theme,
  instanceSetOptions,
  instanceOptions,
  initOptions,
  group,
  eventProps,
  ...htmlAttrs
}: ChartProps): JSX.Element => {
  const [ref] = useChart<HTMLDivElement>({
    initOptions,
    instanceSetOptions,
    instanceOptions,
    theme,
    use,
    group,
    eventProps,
    chartId: htmlAttrs.id,
  })

  return <div data-testid="chart-container" {...htmlAttrs} ref={ref} />
}