"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import type { Meta } from "@/types/trajectory";

interface LoadingCardProps {
  meta: Meta | null;
  loadProgress: number;
}

export function LoadingCard({ meta, loadProgress }: LoadingCardProps) {
  return (
    <div className="fixed inset-0 z-40 flex flex-col items-center justify-center bg-slate-800">
      <Card className="w-full max-w-sm rounded-2xl border-slate-600 bg-slate-800 shadow-2xl">
        <CardHeader>
          <CardTitle className="text-center text-white">
            Loading trajectories…
          </CardTitle>
          <CardDescription className="text-center text-slate-400">
            {meta
              ? `${meta.num_particles.toLocaleString()} particles · ${meta.num_steps}h`
              : "Connecting…"}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Progress value={loadProgress} className="h-2 rounded-full" />
          <p className="text-center text-sm text-slate-400">{loadProgress}%</p>
        </CardContent>
      </Card>
    </div>
  );
}
