import type { ReactNode } from "react";
import { Loader2 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import type { RouteLoadingState } from "@/lib/routeLoadingView";

interface RouteLoadingCardProps {
  state: RouteLoadingState;
  children?: ReactNode;
}

export const RouteLoadingCard = ({ state, children }: RouteLoadingCardProps) => (
  <Card className="signal-rail border-slate-700 bg-slate-900/60">
    <CardContent className="space-y-5 p-5">
      <div className="flex items-start gap-3">
        <Loader2 className="mt-0.5 h-4 w-4 shrink-0 animate-spin text-blue-300" />
        <div className="min-w-0">
          <h3 className="text-sm font-bold text-slate-100">{state.title}</h3>
          <p className="mt-1 text-sm leading-6 text-slate-400">{state.message}</p>
        </div>
      </div>
      <div className="flex flex-wrap gap-2">
        {state.facts.map((fact) => (
          <span key={fact} className="metric-capsule text-slate-400">
            {fact}
          </span>
        ))}
      </div>
      {children}
    </CardContent>
  </Card>
);