'use client';

import {Heading} from '@astryxdesign/core/Text';
import {AreaChartView} from '@/shared/components/charts/AreaChartView';
import {BarChartView} from '@/shared/components/charts/BarChartView';
import {LineChartView} from '@/shared/components/charts/LineChartView';
import type {ChartPartSpec} from '@/features/loyaly-ai/types/chat';

export function ChartBlock({charts}: {charts: ChartPartSpec[]}) {
  if (!charts || charts.length === 0) return null;

  return (
    <div className="space-y-4 w-full">
      {charts.map((c, idx) => (
        <div
          key={c.title || idx}
          className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-3 overflow-hidden"
        >
          <div>
            <Heading level={4} className="text-base font-bold text-white">
              {c.title}
            </Heading>
            {c.subtitle ? (
              <p className="text-sm font-medium text-zinc-300 mt-0.5">{c.subtitle}</p>
            ) : null}
          </div>

          <div className="h-56 @sm/report:h-64 w-full max-w-full pt-2">
            {c.chartType === 'area' ? (
              <AreaChartView
                data={c.data}
                xKey={c.xKey}
                series={c.series}
                height="100%"
              />
            ) : c.chartType === 'bar' ? (
              <BarChartView
                data={c.data}
                xKey={c.xKey}
                series={c.series}
                height="100%"
              />
            ) : (
              <LineChartView
                data={c.data}
                xKey={c.xKey}
                series={c.series}
                height="100%"
              />
            )}
          </div>
        </div>
      ))}
    </div>
  );
}
