import React from "react";
import { Plus, Minus } from "lucide-react";

interface ExpandableSectionProps {
  title: string;
  amount: string;
  isExpanded: boolean;
  onToggle: () => void;
  bgColor: string;
  hoverColor: string;
  textColor: string;
  children: React.ReactNode;
}

export const ExpandableSection: React.FC<ExpandableSectionProps> = ({
  title,
  amount,
  isExpanded,
  onToggle,
  bgColor,
  hoverColor,
  textColor,
  children,
}) => {
  return (
    <div className="mb-6 rounded-lg border border-slate-200 bg-white shadow-sm overflow-hidden">
      <button
        onClick={onToggle}
        className={`w-full flex items-center justify-between p-4 ${bgColor} ${hoverColor} transition-colors`}
      >
        <div className="flex items-center gap-3">
          <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
          <span className={`text-sm font-semibold ${textColor}`}>
            {amount}
          </span>
        </div>
        {isExpanded ? (
          <Minus size={20} className="text-slate-600" />
        ) : (
          <Plus size={20} className="text-slate-600" />
        )}
      </button>

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