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

interface AssetsSectionProps {
  data: DebtIntelligenceData;
  flattenedAssets: Record<string, { items: AssetTypeIndividual[], total: number }>;
  expandedModules: Set<string>;
  onToggleModule: (key: string) => void;
}

export const AssetsSection: React.FC<AssetsSectionProps> = ({
  data,
  flattenedAssets,
  expandedModules,
  onToggleModule,
}) => {
  return (
    <div className="space-y-3">
      {Object.entries(flattenedAssets).map(([moduleKey, moduleData]) => {
        let displayModuleName = moduleKey;
        if (data.asset_modules && data.asset_modules[moduleKey]) {
          displayModuleName = data.asset_modules[moduleKey];
        } else if (moduleKey === '' || moduleKey === '---' || moduleKey === '--') {
          displayModuleName = 'Various';
        }

        const hasItems = moduleData.items && moduleData.items.length > 0;

        return (
          <ExpandableModule
            key={moduleKey}
            moduleName={displayModuleName}
            amount={formatCurrency(moduleData.total, data.code)}
            isExpanded={expandedModules.has(`asset-module-${moduleKey}`)}
            onToggle={() => onToggleModule(`asset-module-${moduleKey}`)}
            textColor="text-blue-700"
            hasItems={hasItems}
          >
            <div className="space-y-2">
              {moduleData.items.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">
                    <div className="text-[11px] text-slate-500 uppercase font-medium">
                      {item.ticker}
                    </div>
                    <div className="text-sm text-slate-700">
                      {item.name}
                    </div>
                  </div>
                  <span className="text-sm font-medium text-blue-700 whitespace-nowrap">
                    {item.p_currency} {formatNumber(item.value)}
                  </span>
                </div>
              ))}
            </div>
          </ExpandableModule>
        );
      })}
    </div>
  );
};