/** Skeleton daftar trip — tampil instan saat list masih di-fetch. */
export default function Loading() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
      <div className="mb-6 h-8 w-56 animate-pulse rounded-lg bg-neutral-200 sm:mb-8" />
      <div className="mb-6 h-40 animate-pulse rounded-2xl bg-neutral-100" />

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div
            key={i}
            className="overflow-hidden rounded-2xl border border-neutral-200 bg-white"
          >
            <div className="h-40 animate-pulse bg-neutral-200" />
            <div className="space-y-3 p-4">
              <div className="h-5 w-3/4 animate-pulse rounded bg-neutral-200" />
              <div className="h-4 w-1/2 animate-pulse rounded bg-neutral-100" />
              <div className="h-4 w-2/3 animate-pulse rounded bg-neutral-100" />
              <div className="mt-3 flex items-center justify-between border-t border-neutral-100 pt-3">
                <div className="h-5 w-20 animate-pulse rounded bg-neutral-200" />
                <div className="h-4 w-16 animate-pulse rounded bg-neutral-100" />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}