"use client";

import { PenTool, Sparkles } from "lucide-react";

export function ThinkingOverlay() {
    return (
        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-background/60 backdrop-blur-md transition-all duration-500 animate-in fade-in">
            <div className="relative">
                {/* Pulsing Background Circle */}
                <div className="absolute inset-0 bg-indigo-500/20 rounded-full animate-ping [animation-duration:3s]" />

                {/* Icon Container */}
                <div className="relative bg-card border border-border p-6 rounded-full shadow-lg flex items-center justify-center">
                    <PenTool className="w-10 h-10 text-indigo-500 animate-bounce [animation-duration:2s]" />
                </div>

                {/* Sparkles Decoration */}
                <Sparkles className="absolute -top-2 -right-2 w-6 h-6 text-amber-400 animate-pulse" />
                <Sparkles className="absolute -bottom-1 -left-2 w-4 h-4 text-blue-400 animate-pulse [animation-delay:0.5s]" />
            </div>

            <div className="mt-8 space-y-2 text-center">
                <h3 className="text-xl font-serif font-medium text-foreground">
                    Crafting your draft
                </h3>
                <p className="text-sm text-muted-foreground animate-pulse">
                    Synthesizing insights...
                </p>
            </div>
        </div>
    );
}