frontend/src/components/ui/ComingSoon.tsx

"use client";

import { motion } from "framer-motion";
import { Sparkles } from "lucide-react";

export function ComingSoon({ title, description }: { title: string; description?: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
      className="flex flex-col items-center justify-center min-h-[60vh] gap-6 text-center"
    >
      <div className="relative">
        <div className="absolute inset-0 rounded-full bg-emerald-500/20 blur-2xl scale-150" />
        <div className="relative flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400/20 to-cyan-400/20 border border-emerald-500/20">
          <Sparkles className="h-9 w-9 text-emerald-400" />
        </div>
      </div>
      <div>
        <h1 className="text-3xl font-bold text-white">{title}</h1>
        <p className="text-zinc-400 mt-2 max-w-md">
          {description || "This feature is being built with AI-native capabilities. Coming soon."}
        </p>
      </div>
      <div className="flex items-center gap-2 rounded-xl border border-emerald-500/20 bg-emerald-500/5 px-4 py-2">
        <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
        <span className="text-xs text-emerald-400 font-medium">In Development</span>
      </div>
    </motion.div>
  );
}