"use client";
import { useI18n } from "@/components/I18nProvider";

import { useState } from "react";
import { Search } from "lucide-react";
import { MapCard, type CardMap } from "./MapCard";
export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
  const { t } = useI18n();
  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={t("Search worlds")}
            placeholder={t("Search worlds or servers…")}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </label>
        <div className="tabs" aria-label={t("Capture source")}>
          {[
            ["all", t("All worlds")],
            ["plugin", t("Server exports")],
            ["fabric", t("Player captures")],
          ].map(([id, label]) => (
            <button
              key={id}
              className={source === id ? "active" : ""}
              aria-pressed={source === id}
              onClick={() => setSource(id)}
            >
              {t(label)}
            </button>
          ))}
        </div>
      </div>
      <p className="muted">
        {t("Worlds to explore: {count}", { count: shown.length })}
      </p>
      <div className="cards-grid">
        {shown.map((m, i) => (
          <MapCard map={m} index={i} key={m.id} />
        ))}
      </div>
      {!shown.length && (
        <p className="empty-state">{t("No worlds match that search.")}</p>
      )}
    </>
  );
}