import { Progress } from '@/components/ui/progress';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Loader2 } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';

interface LoadingOverlayProps {
  progress: number;
  currentStep: string;
}

export const LoadingOverlay = ({ progress, currentStep }: LoadingOverlayProps) => (
  <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
    <Card className="w-full max-w-md mx-4">
      <CardContent className="pt-6">
        <div className="space-y-4">
          <div className="flex items-center justify-center space-x-2">
            <Loader2 className="h-6 w-6 animate-spin text-primary" />
            <h3 className="text-lg font-semibold text-center">Seyahatiniz Oluşturuluyor</h3>
          </div>

          <div className="space-y-2">
            <Progress value={progress} className="h-2" />
            <p className="text-sm text-center text-muted-foreground">
              %{progress}
            </p>
          </div>

          <Alert>
            <AlertDescription className="text-center">
              {currentStep}
            </AlertDescription>
          </Alert>

          <p className="text-xs text-center text-muted-foreground">
            Bu işlem yaklaşık 20 saniye sürebilir. Lütfen bekleyin...
          </p>
        </div>
      </CardContent>
    </Card>
  </div>
);
