"use client";

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

type TopicComingSoonProps = {
  topicId: string;
};

export function TopicComingSoon({ topicId }: TopicComingSoonProps) {
  const config = getTopicConfig(topicId);
  if (!config?.externalUrl) return null;

  return (
    <section className="border-t border-[var(--border)] py-16 md:py-24">
      <div className="mx-auto max-w-2xl px-4 text-center sm:px-6">
        <div className="mb-6 text-6xl">{config.icon}</div>
        <h2 className="mb-4 text-xl font-bold sm:text-2xl">即将上线</h2>
        <p className="mb-8 text-[var(--muted-foreground)]">{config.desc}</p>
        <Link
          href={config.externalUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90"
        >
          前往数字游民指南了解更多 →
        </Link>
      </div>
    </section>
  );
}