"use client";

import { Landmark, ChevronRight } from "lucide-react";
import SearchableSelect from "@/components/ui/SearchableSelect";

interface BankSelectionProps {
  selectedBank: { label: string; value: string } | null;
  onBankChange: (option: { label: string; value: string } | null) => void;
  banks?: { label: string; value: string }[];
}

export const BankSelection = ({ selectedBank, onBankChange, banks }: BankSelectionProps) => {
  return (
    <div className="relative rounded-2xl bg-white">
      {/* Subtle top-left glow */}
      <div className="pointer-events-none absolute -left-16 -top-16 h-48 w-48 rounded-full bg-[#428B4D] opacity-10 blur-3xl" />
      {/* Right pattern dots */}
      <div className="pointer-events-none absolute right-0 top-0 h-full w-64 opacity-[0.03]"
        style={{ backgroundImage: "radial-gradient(circle, #428B4D 1px, transparent 1px)", backgroundSize: "20px 20px" }} />

      <div className="relative px-8 py-7">
        <div className="flex flex-col gap-6 sm:flex-row sm:items-center">
          {/* Icon + label */}
          <div className="flex items-center gap-4 shrink-0">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#428B4D]/10 ring-1 ring-[#428B4D]/20">
              <Landmark className="h-5 w-5 text-[#428B4D]" />
            </div>
            <div>
              <p className="text-[10px] font-bold uppercase tracking-[0.15em] text-slate-400">
                Cash Balance
              </p>
              <h2 className="text-lg font-bold text-slate-800 leading-tight">Select Bank</h2>
            </div>
          </div>

          {/* Divider */}
          <div className="hidden sm:block h-10 w-px bg-slate-200" />

          {/* Select */}
          <div className="flex-1 max-w-md">
            <SearchableSelect
              staticOptions={banks}
              apiUrl={banks ? undefined : "/api/cash-balance/banks"}
              value={selectedBank}
              onChange={onBankChange}
              placeholder="Search and select a bank…"
              className="bg-white border-slate-200 text-slate-800 placeholder:text-slate-400 hover:border-slate-300 focus:border-[#428B4D] focus:ring-[#428B4D]/20"
            />
          </div>

          {/* Selected state */}
          {selectedBank && (
            <div className="flex items-center gap-2 rounded-xl bg-[#428B4D]/10 px-4 py-2.5 ring-1 ring-[#428B4D]/30 shrink-0">
              <div className="h-2 w-2 rounded-full bg-[#428B4D]" />
              <span className="text-sm font-semibold text-slate-800">{selectedBank.label}</span>
              <ChevronRight className="h-3.5 w-3.5 text-slate-400" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};