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

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

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

        return (
          <ExpandableModule
            key={moduleKey}
            moduleName={moduleName}
            amount={formatCurrency(Math.abs(module.expense_total || 0), data.code)}
            isExpanded={expandedModules.has(`expense-${moduleKey}`)}
            onToggle={() => onToggleModule(`expense-${moduleKey}`)}
            textColor="text-red-700"
            hasItems={hasExpense}
          >
            <div className="space-y-2">
              {module.expense.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.isin && (
                      <div className="text-[11px] text-slate-500 uppercase font-medium">
                        {item.isin}
                      </div>
                    )}
                    <div className="text-sm text-slate-700">
                      {item.ticker2 || 'N/A'}
                    </div>
                  </div>
                  <span className="text-sm font-medium text-red-600 whitespace-nowrap">
                    {item.currency || 'Other'} {formatNumber(item.amount)}
                  </span>
                </div>
              ))}
            </div>
          </ExpandableModule>
        );
      })}
    </div>
  );
};