"use client";

import { useState } from "react";
import type { Kid } from "@/app/data/kids";
import KidCard from "@/app/components/KidCard";

/** Compara sin mayúsculas ni acentos: "sofia" encuentra a "Sofía Méndez". */
function normalize(value: string): string {
  return value
    .normalize("NFD")
    .replace(/\p{Diacritic}/gu, "")
    .toLowerCase();
}

export default function KidsBrowser({ kids }: { kids: Kid[] }) {
  const [query, setQuery] = useState("");
  const filtered = kids.filter((kid) => normalize(kid.name).includes(normalize(query)));

  return (
    <div>
      {/* Buscador */}
      <div className="mb-[22px] flex items-center gap-[11px] rounded-[14px] border border-[#ECE0D0] bg-[#FFFDF9] px-4 py-3">
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#B0A290"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="11" cy="11" r="7" />
          <path d="m21 21-4.3-4.3" />
        </svg>
        <input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Buscar niño…"
          className="flex-1 border-none bg-transparent text-[15px] text-[#3F362E] outline-none placeholder:text-[#B6A99B]"
        />
      </div>

      {/* Encabezado de sección: sala + contador + divisor */}
      <div className="mb-[14px] flex items-center gap-3">
        <span className="text-[12.5px] font-extrabold tracking-[.8px] text-[#3F362E]">SALA SOLES</span>
        <span className="text-[13px] text-[#A89A8B]">
          {filtered.length} {filtered.length === 1 ? "niño" : "niños"}
        </span>
        <span className="h-px flex-1 bg-[#E7DAC8]" />
      </div>

      {/* Grilla filtrada o estado vacío */}
      {filtered.length > 0 ? (
        <div className="grid grid-cols-2 gap-[14px]">
          {filtered.map((kid) => (
            <KidCard key={kid.slug} kid={kid} />
          ))}
        </div>
      ) : (
        <div className="rounded-[18px] border border-dashed border-[#DBCDBA] bg-[#FFFDF9] px-4 py-10 text-center text-[14.5px] text-[#94887B]">
          No hay niños que coincidan con la búsqueda.
        </div>
      )}
    </div>
  );
}