import { Link } from "@tanstack/react-router";
import { topicToSlug } from "@/lib/topics";

export function TopicTag({ topic }: { topic: string }) {
  return (
    <Link
      to="/topics/$topic"
      params={{ topic: topicToSlug(topic) }}
      className="inline-flex items-center rounded-full border border-[var(--gold)]/40 bg-[var(--gold)]/10 px-3 py-1 text-xs font-medium text-primary transition hover:bg-[var(--gold)]/20"
    >
      {topic}
    </Link>
  );
}