import React from "react";
import { ConsolidatedData } from "@/hooks/useConsolidatedHoldingsReport";

interface SelectedBanksInfoProps {
  data: ConsolidatedData;
}

export const SelectedBanksInfo: React.FC<SelectedBanksInfoProps> = ({ data }) => {
  if (data.selected_banks.length === 0) {
    return null;
  }

  return (
    <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm text-slate-900">
      <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
        Selected Banks
      </div>
      <div className="flex flex-wrap gap-2">
        {data.selected_banks.map((bank) => (
          <span
            key={bank.bank_id}
            className="inline-flex items-center rounded-full bg-[#428B4D]/10 px-3 py-1 text-xs font-medium text-[#428B4D]"
          >
            {bank.bank_name}
          </span>
        ))}
      </div>
    </div>
  );
};