'use client';

/**
 * CurrentPeriodCard — Displays the current quarter financial summary.
 *
 * Shows "Período actual" heading with the quarter date range and four
 * financial values formatted in CLP: Saldo actual, Anticipos, Ajustes,
 * and Ganancias netas.
 *
 * Requirements: 4.1, 4.2, 4.3
 */

import type { PortalPeriod } from '@/lib/mock-data/types';
import { useCompactCurrencyFormatter } from '@/lib/hooks/useCurrencyFormatter';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface CurrentPeriodCardProps {
  period: PortalPeriod;
}

export default function CurrentPeriodCard({ period }: CurrentPeriodCardProps) {
  const t = useTranslation();
  const fmtMoney = useCompactCurrencyFormatter();

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

      <div className="grid grid-cols-2 gap-4">
        <div>
          <p className="text-xs font-medium text-divisi-text-secondary">
            {t.portal.currentBalance}
          </p>
          <p className="mt-1 text-lg font-bold text-divisi-text-primary">
            {fmtMoney(period.balance)}
          </p>
        </div>
        <div>
          <p className="text-xs font-medium text-divisi-text-secondary">
            {t.portal.advances}
          </p>
          <p className="mt-1 text-lg font-bold text-divisi-text-primary">
            {fmtMoney(period.advances)}
          </p>
        </div>
        <div>
          <p className="text-xs font-medium text-divisi-text-secondary">
            {t.portal.adjustments}
          </p>
          <p className="mt-1 text-lg font-bold text-divisi-text-primary">
            {fmtMoney(period.adjustments)}
          </p>
        </div>
        <div>
          <p className="text-xs font-medium text-divisi-text-secondary">
            {t.portal.netEarnings}
          </p>
          <p className="mt-1 text-lg font-bold text-divisi-accent">
            {fmtMoney(period.netEarnings)}
          </p>
        </div>
      </div>
    </div>
  );
}