import { Link } from "@tanstack/react-router";
import { cn } from "~/utils/cn";

/** A repository's topics as chips; each searches repositories for it. */
export function TopicList({ topics, className }: { topics: readonly string[]; className?: string }) {
  if (topics.length === 0) return null;
  return (
    <ul className={cn("flex flex-wrap gap-1.5", className)} aria-label="Topics">
      {topics.map((topic) => (
        <li key={topic}>
          <Link
            to="/search"
            search={{ q: topic }}
            className="inline-block rounded-full bg-accent-500/10 px-2.5 py-0.5 text-xs font-medium text-accent-300 hover:bg-accent-500/20"
          >
            {topic}
          </Link>
        </li>
      ))}
    </ul>
  );
}