import type { AnalyticsSummaryResponse } from '@family-budget/shared';
import { formatAmount } from '../utils/format';

interface Props {
  summary: AnalyticsSummaryResponse;
}

export function SummaryCards({ summary }: Props) {
  return (
    <div className="summary-cards">
      <div className="summary-card summary-card-income">
        <div className="summary-label">Доходы</div>
        <div className="summary-value">
          {formatAmount(summary.totalIncome)}
        </div>
      </div>

      <div className="summary-card summary-card-expense">
        <div className="summary-label">Расходы</div>
        <div className="summary-value">
          {formatAmount(summary.totalExpense)}
        </div>
      </div>

      <div
        className={`summary-card ${summary.net >= 0 ? 'summary-card-positive' : 'summary-card-negative'}`}
      >
        <div className="summary-label">Баланс</div>
        <div className="summary-value">
          {formatAmount(summary.net)}
        </div>
      </div>

      {summary.topCategories.length > 0 && (
        <div className="summary-card summary-card-top">
          <div className="summary-label">Топ расходов</div>
          <div className="summary-top-list">
            {summary.topCategories.map((cat) => (
              <div
                key={cat.categoryId}
                className="top-category-item"
              >
                <span className="top-category-name">
                  {cat.categoryName}
                </span>
                <span className="top-category-amount">
                  {formatAmount(cat.amount)}
                </span>
                <span className="top-category-share">
                  {(cat.share * 100).toFixed(0)}%
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}