"use client";

import Link from "next/link";
import { getTopicConfig } from "../config";

type TopicBreadcrumbProps = {
  topicId: string;
};

export function TopicBreadcrumb({ topicId }: TopicBreadcrumbProps) {
  const config = getTopicConfig(topicId);
  if (!config) return null;

  return (
    <nav
      className="mb-6 flex flex-wrap items-center gap-2 text-sm text-[var(--muted-foreground)]"
      aria-label="面包屑"
    >
      <Link href="/" className="transition hover:text-[var(--foreground)]">
        首页
      </Link>
      <span>/</span>
      <Link href="/#topics" className="transition hover:text-[var(--foreground)]">
        模块
      </Link>
      <span>/</span>
      <span className="text-[var(--foreground)] font-medium">{config.title}</span>
    </nav>
  );
}