'use client';

/**
 * LatestStatementsCard — Displays a list of recent downloadable statements.
 *
 * Shows "Últimas declaraciones" heading with a list of quarterly statements
 * (period date range + download icon) and a "Mostrar todo" link at the bottom.
 *
 * Requirements: 7.1, 7.2, 7.3
 */

import Link from 'next/link';
import type { PortalStatement } from '@/lib/mock-data/types';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface LatestStatementsCardProps {
  statements: PortalStatement[];
}

export default function LatestStatementsCard({ statements }: LatestStatementsCardProps) {
  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.latestStatements}
      </h2>

      <ul className="divide-y divide-divisi-border">
        {statements.map((statement) => (
          <li
            key={statement.id}
            className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
          >
            <span className="text-sm text-divisi-text-primary">
              {statement.periodLabel}
            </span>
            <button
              type="button"
              className="flex-shrink-0 rounded-lg p-2 text-divisi-text-secondary hover:text-divisi-accent hover:bg-divisi-bg transition-colors"
              aria-label={`${t.portal.downloadStatementAria} ${statement.periodLabel}`}
            >
              <svg
                className="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                />
              </svg>
            </button>
          </li>
        ))}
      </ul>

      <div className="mt-4 border-t border-divisi-border pt-3">
        <Link
          href="/portal/documents"
          className="text-sm font-medium text-divisi-accent hover:text-divisi-accent-hover transition-colors"
        >
          {t.portal.showAll}
        </Link>
      </div>
    </div>
  );
}