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

export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
  const homeMembers = () => props.homeRosters || [];
  const awayMembers = () => props.awayRosters || [];

  return (
    <Card variant="section" class="p-4 space-y-4 overflow-hidden">
      <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
        Kaderübersicht
      </h3>

      <div class="space-y-4">
        {/* HEIM TEAM ROW */}
        <div class="space-y-2">
          <div class="text-[10px] uppercase font-bold text-accent px-1">
            {props.homeTeam.name}
          </div>
          {/* Horizontale Scrollbar */}
          <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
            <For each={homeMembers()}>
              {(player) => (
                <div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
                  <div class="size-10 rounded-full border border-accent/20 p-0.5 bg-app mb-1">
                    <img
                      src={player.imageUrl || "/fallback-avatar.svg"}
                      class="size-full rounded-full object-cover"
                      alt=""
                    />
                  </div>
                  <span class="text-[10px] text-ink font-medium truncate w-full">
                    {player.name}
                    {/* Nur Nachname spart Platz */}
                  </span>
                </div>
              )}
            </For>
          </div>
        </div>

        {/* AUSWÄRTS TEAM ROW */}
        <div class="space-y-2">
          <div class="text-[10px] uppercase font-bold text-ink-muted px-1">
            {props.awayTeam.name}
          </div>
          <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
            <For each={awayMembers()}>
              {(player) => (
                <div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
                  <div class="size-10 rounded-full border border-line p-0.5 bg-app mb-1">
                    <img
                      src={player.imageUrl || "/fallback-avatar.svg"}
                      class="size-full rounded-full object-cover"
                      alt=""
                    />
                  </div>
                  <span class="text-[10px] text-ink font-medium truncate w-full">
                    {player.name.split(" ")[1] || player.name}
                  </span>
                </div>
              )}
            </For>
          </div>
        </div>
      </div>
    </Card>
  );
}