import React from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { ArrowLeft, Construction, ArrowRight } from 'lucide-react';

interface ComingSoonPortalProps {
  title: string;
  icon: React.ElementType;
}

export const ComingSoonPortal: React.FC<ComingSoonPortalProps> = ({ title, icon: Icon }) => {
  const navigate = useNavigate();

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-white p-8">
      <motion.div 
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-md w-full bg-slate-900/50 border border-slate-800 rounded-3xl p-12 text-center backdrop-blur-xl"
      >
        <div className="w-20 h-20 bg-blue-500/10 border border-blue-500/20 rounded-2xl flex items-center justify-center mx-auto mb-8 text-blue-400">
          <Icon size={40} />
        </div>
        
        <h1 className="text-3xl font-black mb-4 tracking-tight">{title} Portal</h1>
        <div className="flex items-center justify-center gap-2 text-amber-500 font-bold text-sm uppercase tracking-widest mb-8">
          <Construction size={16} />
          <span>Under Construction</span>
        </div>
        
        <p className="text-slate-400 mb-10 leading-relaxed">
          The {title} specialized interface is currently being optimized for high-performance clinical workflows.
        </p>
        
        <div className="space-y-4">
          <button 
            onClick={() => navigate('/launcher')}
            className="w-full py-4 bg-white text-slate-950 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-slate-200 transition-colors"
          >
            <ArrowLeft size={18} />
            Back to Launcher
          </button>
          
          <button 
            onClick={() => navigate('/')}
            className="w-full py-4 bg-slate-800 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-slate-700 transition-colors"
          >
            Access Core Dashboard
            <ArrowRight size={18} />
          </button>
        </div>
      </motion.div>
      
      <div className="mt-12 text-slate-600 text-xs font-mono">
        STUB_ID: {title.toUpperCase().replace(/\s/g, '_')}_v0.1-ALPHA
      </div>
    </div>
  );
};
