import { Skeleton } from "@/components/ui/skeleton";

export function TripLoading() {
  return (
    <div className="container px-4 py-8 mx-auto max-w-6xl">
      <div className="flex flex-col space-y-8">
        <div className="flex flex-col space-y-3">
          <Skeleton className="h-12 w-3/4" />
          <Skeleton className="h-6 w-1/2" />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="md:col-span-2">
            <Skeleton className="h-96 w-full rounded-lg" />
          </div>
          <div>
            <Skeleton className="h-36 w-full mb-6 rounded-lg" />
            <Skeleton className="h-64 w-full rounded-lg" />
          </div>
        </div>
      </div>
      <div className="mt-8 text-center text-gray-500">
        Chargement des données du voyage...
      </div>
    </div>
  );
}