import Link from "next/link";
import { SYSTEM_LIST } from "@/lib/systems";
import type { SystemId } from "@/lib/types";

export function SystemFilters({
  active,
  available,
}: {
  active?: SystemId | "all";
  available?: SystemId[];
}) {
  const systems = available
    ? SYSTEM_LIST.filter((s) => available.includes(s.id))
    : SYSTEM_LIST;

  return (
    <div className="flex flex-wrap gap-2">
      <Link
        href="/"
        className="system-chip"
        data-active={active === "all" || !active ? "true" : "false"}
      >
        All
      </Link>
      {systems.map((sys) => (
        <Link
          key={sys.id}
          href={`/systems/${sys.id}`}
          className="system-chip"
          data-active={active === sys.id ? "true" : "false"}
        >
          {sys.shortName}
        </Link>
      ))}
    </div>
  );
}