import { useMemo } from 'react'
import ReactECharts from 'echarts-for-react'
import { buildTopActivitiesOption } from '@/lib/chart-options'
import type { HeatmapMode } from '@/lib/colors'
import type { ActivitySimResult } from '@/domain/types'

interface TopActivitiesChartProps {
  perActivity: ActivitySimResult[]
  mode: HeatmapMode
  currency: string
}

export function TopActivitiesChart({ perActivity, mode, currency }: TopActivitiesChartProps) {
  const option = useMemo(
    () => buildTopActivitiesOption(perActivity, mode, currency),
    [perActivity, mode, currency]
  )

  if (perActivity.length === 0) {
    return <div className="flex items-center justify-center h-64 text-xs text-slate-400">Sin datos de actividades</div>
  }

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