import React from "react";
import { DebtIntelligenceData, ModuleData } from "@/hooks/useDebtIntelligenceReport";
import { ExpandableModule } from "./ExpandableModule";
import { formatCurrency, formatNumber } from "@/lib/debt-intelligence-utils";

interface IncomeSectionProps {
  data: DebtIntelligenceData;
  modules: Record<string, ModuleData>;
  expandedModules: Set<string>;
  onToggleModule: (key: string) => void;
}

export const IncomeSection: React.FC<IncomeSectionProps> = ({
  data,
  modules,
  expandedModules,
  onToggleModule,
}) => {
  return (
    <div className="space-y-3">
      {Object.entries(modules).map(([moduleKey, module]) => {
        if (!module.income || module.income.length === 0) return null;
        const moduleName = data.asset_modules?.[moduleKey] || moduleKey;
        const hasIncome = module.income && module.income.length > 0;

        return (
          <ExpandableModule
            key={moduleKey}
            moduleName={moduleName}
            amount={formatCurrency(module.income_total || 0, data.code)}
            isExpanded={expandedModules.has(`income-${moduleKey}`)}
            onToggle={() => onToggleModule(`income-${moduleKey}`)}
            textColor="text-green-700"
            hasItems={hasIncome}
          >
            <div className="space-y-2">
              {module.income.map((item, idx) => (
                <div key={idx} className="flex justify-between items-start py-1.5 border-b border-slate-100 last:border-0">
                  <div className="flex-1 pr-4">
                    {item.ticker1 && (
                      <div className="text-[11px] text-slate-500 uppercase font-medium">
                        {item.ticker1}
                      </div>
                    )}
                    <div className="text-sm text-slate-700">
                      {item.ticker2 || item.isin || 'N/A'}
                    </div>
                  </div>
                  <span className="text-sm font-medium text-green-700 whitespace-nowrap">
                    {item.currency} {formatNumber(item.amount)}
                  </span>
                </div>
              ))}
            </div>
          </ExpandableModule>
        );
      })}
    </div>
  );
};