import { For } from "solid-js";
import { Card } from "./Card";

export function MatchDetailsSkeleton() {
  return (
    <div class="animate-pulse">
      <div class="bg-gradient-to-b from-surface to-surface2 w-full py-5.5 px-10 border-b border-line">
        <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-chip rounded w-16 animate-skeleton-loop"
              style={{ "--delay": "0ms" }}
            />
            <div
              class="size-8 bg-chip rounded-full animate-skeleton-loop"
              style={{ "--delay": "50ms" }}
            />
          </div>
          <div
            class="w-16 min-w-16 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
            style={{ "--delay": "100ms" }}
          />
          <div class="flex-1 flex items-center gap-2 justify-start">
            <div
              class="size-8 bg-chip rounded-full animate-skeleton-loop"
              style={{ "--delay": "50ms" }}
            />
            <div
              class="h-3 bg-chip 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) => (
            <Card
              variant="section"
              class="p-3 animate-skeleton-loop"
              style={{ "--delay": `${i * 120}ms` }}
            >
              <div class="flex justify-center mb-2">
                <div class="h-2.5 bg-chip 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-chip rounded w-16" />
                    <div class="size-8 bg-chip rounded-full" />
                  </div>
                </div>
                <div class="w-8 h-6 bg-elevated/60 rounded border border-line/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-chip rounded-full" />
                    <div class="h-3 bg-chip rounded w-16" />
                  </div>
                </div>
              </div>
            </Card>
          )}
        </For>
      </div>
    </div>
  );
}