import React from "react";
import { Plus, Minus } from "lucide-react";
import { formatCurrency, formatNumber } from "@/lib/debt-intelligence-utils";

interface ExpandableModuleProps {
  moduleName: string;
  amount: string;
  isExpanded: boolean;
  onToggle: () => void;
  textColor: string;
  children: React.ReactNode;
  hasItems: boolean;
}

export const ExpandableModule: React.FC<ExpandableModuleProps> = ({
  moduleName,
  amount,
  isExpanded,
  onToggle,
  textColor,
  children,
  hasItems,
}) => {
  return (
    <div className="border border-slate-200 rounded-lg overflow-hidden">
      <div
        className="flex justify-between items-center py-2 px-3 bg-slate-50 hover:bg-slate-100 cursor-pointer"
        onClick={onToggle}
      >
        <div className="flex items-center gap-2">
          {hasItems && (
            isExpanded ? (
              <Minus size={16} className="text-slate-600" />
            ) : (
              <Plus size={16} className="text-slate-600" />
            )
          )}
          <span className="text-sm font-medium text-slate-700">{moduleName}</span>
        </div>
        <span className={`text-sm font-semibold ${textColor}`}>
          {amount}
        </span>
      </div>

      {hasItems && isExpanded && (
        <div className="p-3 bg-white border-t border-slate-200">
          {children}
        </div>
      )}
    </div>
  );
};