// Figma Design Context: Wyszukiwarka krajów (Input — stany)
// Node ID: 122:1054 (Active/Wyszukiwanie), 122:1091 (Default pusty), 123:1195 (Default wybrane)
// Pobrano: 2026-03-25
// UWAGA: Kod referencyjny React+Tailwind z Figma MCP — do adaptacji na PHP/HTML/CSS

const imgImage1 = "https://www.figma.com/api/mcp/asset/08457e8b-11f6-4194-b0a2-a5b2c900a505"; // Flaga Niemcy
const imgImage2 = "https://www.figma.com/api/mcp/asset/54e5a65c-6ca3-4749-89cf-12d9651f8a07"; // Flaga Norwegia
const imgImage3 = "https://www.figma.com/api/mcp/asset/dff6d6a5-6c45-46ef-9ed5-50ca45e0aef8"; // Flaga Czechy
const imgPlus = "https://www.figma.com/api/mcp/asset/f6b0c0c6-ab8c-4156-9e90-650bb559fa2f";
const imgVector11 = "https://www.figma.com/api/mcp/asset/a858c025-8ee0-4a0b-ad87-7a13a6a57d21";
const imgPlus1 = "https://www.figma.com/api/mcp/asset/07f69e9c-5ea5-4b67-b4e8-cc09e619e1fe"; // Plus (dodaj)
const imgPlus2 = "https://www.figma.com/api/mcp/asset/1f56ab37-6765-401c-807e-dedef33f0056"; // X (usuń)
const imgPlus3 = "https://www.figma.com/api/mcp/asset/9b64413d-57e9-4917-87d9-e158e3266e16";

/*
 * STANY WYSZUKIWARKI KRAJÓW:
 *
 * Stan 1 (Default pusty, 122:1091):
 * - Ikona "+" + "Wyszukaj i dodaj kraj na trasie"
 * - Pole zwinięte, 770x48
 *
 * Stan 2 (Active/Wyszukiwanie, 122:1054):
 * - Pole tekstowe z wpisanym tekstem (np. "N|")
 * - Separator linia
 * - Pod spodem: karty krajów pasujących do frazy
 *   - Karta: Flaga (24px, rounded-full) + Nazwa + "od 50 do 250 zł" + "+" (dodaj)
 *   - 2 kolumny obok siebie (363px each)
 * - Drugi wariant: po wybraniu jednego (np. "C|"):
 *   - Wybrany kraj: bg rgba(47,36,130,0.05), border rgba(47,36,130,0.2), ikona "×"
 *   - Wyniki: normalne karty z "+"
 *
 * Stan 3 (Default wybrane, 123:1195):
 * - Ikona "+" + "Wyszukaj i dodaj kraj na trasie"
 * - Pod spodem: karty wybranych krajów z "×" do usunięcia
 *   - bg-white, border rgba(0,0,0,0.1), 770x128 total
 *
 * KARTY KRAJÓW:
 * - Wymiar: 363x56
 * - Flaga: 24px okrągła (overflow hidden, border #d3d3d3)
 * - Nazwa: Albert Sans SemiBold 15px, #2F2482
 * - Cena: "od 50 do 250 zł" — 10px "od"/"do", 14px wartości, #505050
 * - Akcja: "+" (dodaj) lub "×" (usuń)
 * - Wybrany: bg rgba(47,36,130,0.05), border rgba(47,36,130,0.2)
 */

export default function Input() {
  return (
    <div className="bg-white relative rounded-[8px] size-full" data-name="Input" data-node-id="122:1054">
      <div className="absolute content-stretch flex gap-[8px] items-center left-[16px] top-[12px]" data-node-id="122:1055">
        <div className="relative shrink-0 size-[16px]" data-name="Plus" data-node-id="122:1056">
          <img alt="" className="absolute block max-w-none size-full" src={imgPlus} />
        </div>
        <p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[0] relative shrink-0 text-[#2f2482] text-[15px] tracking-[-0.3px] whitespace-nowrap" data-node-id="122:1060">
          <span className="leading-[24px]">N</span>
          <span className="leading-[24px] text-[#505050]">|</span>
        </p>
      </div>
      <div className="absolute bottom-[80px] h-0 left-[16px] w-[738px]" data-node-id="122:1061">
        <div className="absolute inset-[-0.5px_0]">
          <img alt="" className="block max-w-none size-full" src={imgVector11} />
        </div>
      </div>
      {/* Karta: Niemcy */}
      <div className="absolute border border-[rgba(0,0,0,0.1)] border-solid h-[56px] left-[16px] overflow-clip rounded-[8px] top-[60px] w-[363px]" data-name="Opcja dodatkowa" data-node-id="122:1104">
        <p className="absolute font-semibold left-[43.5px] text-[#2f2482] text-[15px] top-[calc(50%-10px)]">Niemcy</p>
        <p className="absolute left-[310.5px] text-[#505050] text-right top-[15.5px]">
          <span className="text-[10px]">od </span><span className="text-[14px]">50 </span>
          <span className="text-[10px]">do </span><span className="text-[14px]">250 zł</span>
        </p>
        <div className="absolute left-[11.5px] overflow-clip rounded-full size-[24px] top-[15.5px]" data-name="Flag">
          <img alt="Niemcy" src={imgImage1} />
        </div>
        <div className="absolute left-[330.5px] size-[16px] top-[19.5px]" data-name="Plus">
          <img alt="Dodaj" src={imgPlus1} />
        </div>
      </div>
      {/* Karta: Norwegia */}
      <div className="absolute border border-[rgba(0,0,0,0.1)] border-solid h-[56px] left-[391px] overflow-clip rounded-[8px] top-[60px] w-[363px]" data-name="Opcja dodatkowa" data-node-id="122:1114">
        <p className="absolute font-semibold left-[43.5px] text-[#2f2482] text-[15px] top-[calc(50%-10px)]">Norwegia</p>
        <div className="absolute left-[11.5px] overflow-clip rounded-full size-[24px] top-[15.5px]" data-name="Flag">
          <img alt="Norwegia" src={imgImage2} />
        </div>
        <div className="absolute left-[330.5px] size-[16px] top-[19.5px]" data-name="Plus">
          <img alt="Dodaj" src={imgPlus1} />
        </div>
      </div>
    </div>
  );
}