import { For } from "solid-js";

export function MatchDetailsFutureSkeleton() {
  return (
    <div class="animate-pulse">
      <div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 text-center">
        <div class="h-2.5 bg-gray-700 rounded w-24 mx-auto mb-4 animate-skeleton-loop" />

        <div class="flex items-center justify-between gap-4 my-2">
          <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
            <div
              class="size-14 bg-gray-700 rounded-full animate-skeleton-loop"
              style={{ "--delay": "0ms" }}
            />
            <div class="h-3 bg-gray-700 rounded w-20" />
          </div>

          <div class="flex flex-col items-center justify-center px-4 py-2 bg-gray-950/50 rounded-2xl border border-gray-800 min-w-[100px] gap-1.5">
            <div class="h-2.5 bg-gray-700 rounded w-14" />
            <div class="h-5 bg-gray-700 rounded w-12" />
            <div class="h-2 bg-gray-700 rounded w-6" />
          </div>

          <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
            <div
              class="size-14 bg-gray-700 rounded-full animate-skeleton-loop"
              style={{ "--delay": "80ms" }}
            />
            <div class="h-3 bg-gray-700 rounded w-20" />
          </div>
        </div>

        <div class="h-2.5 bg-gray-700 rounded w-32 mx-auto mt-4" />
      </div>

      <div class="p-4 space-y-6">
        <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 animate-skeleton-loop">
          <div class="h-2.5 bg-gray-700 rounded w-40 mx-auto mb-3" />
          <div class="h-3.5 w-full rounded-full bg-gray-900 border border-gray-750" />
          <div class="flex justify-between items-center mt-2.5">
            <div class="h-2.5 bg-gray-700 rounded w-14" />
            <div class="h-2.5 bg-gray-700 rounded w-14" />
            <div class="h-2.5 bg-gray-700 rounded w-14" />
          </div>
        </div>

        <div
          class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-32 animate-skeleton-loop"
          style={{ "--delay": "120ms" }}
        />

        <div
          class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 animate-skeleton-loop"
          style={{ "--delay": "240ms" }}
        >
          <div class="h-2.5 bg-gray-700 rounded w-32 mx-auto" />
          <div class="flex items-center justify-between gap-2 px-2">
            <div class="flex gap-1">
              <For each={[0, 1, 2, 3, 4]}>
                {() => <div class="size-6 bg-gray-700 rounded-full" />}
              </For>
            </div>
            <div class="h-2.5 bg-gray-700 rounded w-8" />
            <div class="flex gap-1">
              <For each={[0, 1, 2, 3, 4]}>
                {() => <div class="size-6 bg-gray-700 rounded-full" />}
              </For>
            </div>
          </div>
        </div>

        <div
          class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-40 animate-skeleton-loop"
          style={{ "--delay": "360ms" }}
        />
      </div>
    </div>
  );
}