interface CustomerBalance {
  currency_id: string | null;
  bank_id: string | null;
  balance: string | null;
  last_updated: string | null;
  cnt: string | null;
  stock_id: string | null;
}

interface BalanceInformationProps {
  selectedBank: { label: string; value: string } | null;
  customerBalance: CustomerBalance | null | undefined;
  formattedBalance: string;
}

export const BalanceInformation = ({ 
  selectedBank, 
  customerBalance, 
  formattedBalance 
}: BalanceInformationProps) => {
  if (!selectedBank || !customerBalance) {
    return null;
  }

  return (
    <div className="rounded-lg border border-[#428B4D]/15 bg-white/95 p-6 shadow-md">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-lg font-semibold text-slate-800">
          Balance Information
        </h2>
        <span className="rounded-full bg-[#428B4D]/10 px-3 py-1 text-xs font-semibold text-[#428B4D]">
          {selectedBank.label}
        </span>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div className="rounded-lg border border-slate-100 bg-slate-50/80 px-4 py-4 shadow-inner">
          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Balance
          </p>
          <p className="mt-1 text-lg font-semibold text-slate-800">
            {formattedBalance}
          </p>
        </div>

        <div className="rounded-lg border border-slate-100 bg-slate-50/80 px-4 py-4 shadow-inner">
          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Currency ID
          </p>
          <p className="mt-1 text-lg font-semibold text-slate-800">
            {customerBalance.currency_id || "—"}
          </p>
        </div>

        <div className="rounded-lg border border-slate-100 bg-slate-50/80 px-4 py-4 shadow-inner">
          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Last Updated
          </p>
          <p className="mt-1 text-lg font-semibold text-slate-800">
            {customerBalance.last_updated || "—"}
          </p>
        </div>
      </div>
    </div>
  );
};