import React from 'react';
import { Construction } from 'lucide-react';
import { SpotlightCard } from '../components/SpotlightCard';

const UnderConstruction = ({ title = "Under Construction", moduleName = "Module" }) => {
    return (
        <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white p-8 flex items-center justify-center">
            <SpotlightCard className="max-w-2xl w-full p-12 text-center">
                <div className="flex justify-center mb-6">
                    <Construction size={64} className="text-[#fda913] animate-pulse" />
                </div>
                <h1 className="text-4xl font-extrabold mb-4">
                    {title}
                </h1>
                <p className="text-xl text-zinc-500 dark:text-zinc-400 mb-8 font-light">
                    This {moduleName} is currently under construction.
                </p>
                <div className="p-4 bg-zinc-100 dark:bg-white/5 rounded-xl border border-dashed border-zinc-300 dark:border-white/10">
                    <p className="text-sm font-mono text-[#fda913]">STATUS: DEVELOPMENT_IN_PROGRESS</p>
                </div>
            </SpotlightCard>
        </div>
    );
};

export default UnderConstruction;