import { For } from "solid-js";

export function MatchDetailsSkeleton() {
  return (
    <div class="animate-pulse">
      <div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800">
        <div class="flex items-center justify-between gap-2">
          <div class="flex-1 flex items-center gap-2 justify-end">
            <div
              class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
              style={{ "--delay": "0ms" }}
            />
            <div
              class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
              style={{ "--delay": "50ms" }}
            />
          </div>
          <div
            class="w-16 min-w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop"
            style={{ "--delay": "100ms" }}
          />
          <div class="flex-1 flex items-center gap-2 justify-start">
            <div
              class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
              style={{ "--delay": "50ms" }}
            />
            <div
              class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
              style={{ "--delay": "0ms" }}
            />
          </div>
        </div>
      </div>

      <div class="p-4 space-y-3">
        <For each={[0, 1, 2, 3]}>
          {(i) => (
            <div
              class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800 animate-skeleton-loop"
              style={{ "--delay": `${i * 120}ms` }}
            >
              <div class="flex justify-center mb-2">
                <div class="h-2.5 bg-gray-700 rounded w-14" />
              </div>
              <div class="flex items-center gap-2">
                <div class="flex-1 flex flex-col gap-2">
                  <div class="flex items-center gap-2 justify-end">
                    <div class="h-3 bg-gray-700 rounded w-16" />
                    <div class="size-8 bg-gray-700 rounded-full" />
                  </div>
                </div>
                <div class="w-8 h-6 bg-gray-950/60 rounded border border-gray-700/50 flex-shrink-0" />
                <div class="flex-1 flex flex-col gap-2">
                  <div class="flex items-center gap-2 justify-start">
                    <div class="size-8 bg-gray-700 rounded-full" />
                    <div class="h-3 bg-gray-700 rounded w-16" />
                  </div>
                </div>
              </div>
            </div>
          )}
        </For>
      </div>
    </div>
  );
}