"use client";
import { useState } from "react";
import { Search } from "lucide-react";
import { MapCard, type CardMap } from "./MapCard";
export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
  const [query, setQuery] = useState(""),
    [source, setSource] = useState("all");
  const shown = maps.filter(
    (m) =>
      (source === "all" || m.source === source) &&
      (m.name + " " + m.description + " " + (m.server?.name ?? ""))
        .toLowerCase()
        .includes(query.trim().toLowerCase()),
  );
  return (
    <>
      <div className="catalog-controls">
        <label className="search-field">
          <Search size={17} />
          <input
            aria-label="Search worlds"
            placeholder="Search worlds or servers…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </label>
        <div className="tabs" aria-label="Capture source">
          {[
            ["all", "All worlds"],
            ["plugin", "Server exports"],
            ["fabric", "Player captures"],
          ].map(([id, label]) => (
            <button
              key={id}
              className={source === id ? "active" : ""}
              aria-pressed={source === id}
              onClick={() => setSource(id)}
            >
              {label}
            </button>
          ))}
        </div>
      </div>
      <p className="muted">
        {shown.length} {shown.length === 1 ? "world" : "worlds"} to explore
      </p>
      <div className="cards-grid">
        {shown.map((m, i) => (
          <MapCard map={m} index={i} key={m.id} />
        ))}
      </div>
      {!shown.length && (
        <p className="empty-state">No worlds match that search.</p>
      )}
    </>
  );
}