import { useMemo } from 'react'
import ReactECharts from 'echarts-for-react'
import { buildCostCompositionOption } from '@/lib/chart-options'
import type { SimulationResult } from '@/domain/types'

interface CostCompositionChartProps {
  result: SimulationResult
  currency: string
}

export function CostCompositionChart({ result, currency }: CostCompositionChartProps) {
  const option = useMemo(
    () => buildCostCompositionOption(result, currency),
    [result, currency]
  )

  return <ReactECharts option={option} style={{ height: 300 }} notMerge />
}
