'use client';

/**
 * FinancialSummaryChart — Line chart showing net earnings and final balance trends.
 *
 * Uses the existing LineChartWidget component with two series:
 * - Blue line for "Ganancias netas" (Net Earnings)
 * - Pink line for "Saldo final" (Final Balance)
 *
 * Requirements: 6.1, 6.2, 6.3, 6.4, 6.5
 */

import type { FinancialTimePoint } from '@/lib/mock-data/types';
import LineChartWidget from '@/components/charts/LineChartWidget';
import { chartColors } from '@/lib/constants/theme';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface FinancialSummaryChartProps {
  data: FinancialTimePoint[];
}

export default function FinancialSummaryChart({ data }: FinancialSummaryChartProps) {
  const t = useTranslation();

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card p-5">
      <h2 className="mb-4 text-lg font-semibold text-divisi-text-primary">
        {t.portal.financialSummary}
      </h2>

      <LineChartWidget
        data={data as unknown as Array<Record<string, unknown>>}
        xKey="month"
        lines={[
          {
            dataKey: 'netEarnings',
            color: chartColors.secondary,
            name: t.portal.netEarningsLabel,
          },
          {
            dataKey: 'finalBalance',
            color: chartColors.quinary,
            name: t.portal.finalBalanceLabel,
          },
        ]}
        height={280}
        showLegend
      />
    </div>
  );
}