import { Link } from "@tanstack/react-router";
import { Construction } from "lucide-react";
import { useT } from "@/lib/i18n";

interface ComingSoonProps {
  title: string;
  description?: string;
}

export default function ComingSoon({ title, description }: ComingSoonProps) {
  const t = useT();
  return (
    <div className="container py-20 md:py-32">
      <div className="max-w-2xl mx-auto text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl gradient-primary text-white mb-6">
          <Construction className="w-7 h-7" />
        </div>
        <h1 className="text-display text-3xl md:text-5xl mb-4">{title}</h1>
        <p className="text-muted-foreground mb-8">
          {description ?? t("Deze pagina wordt momenteel gemigreerd naar de nieuwe SSR-architectuur en is binnenkort beschikbaar.", "This page is currently being migrated to the new SSR architecture and will be available soon.")}
        </p>
        <Link
          to="/"
          className="inline-flex items-center gap-2 rounded-xl gradient-primary text-white font-semibold px-6 py-3 shadow-glow-soft hover:opacity-90 transition"
        >
          {t("Terug naar home", "Back to home")}
        </Link>
      </div>
    </div>
  );
}