<script lang="ts">
  import Steve from '@assets/img/steve.png';
  import Team from '@components/website/Team.svelte';
  import type { GetDeathsRes } from '@db/schema/death.ts';
  import { type ActionReturnType, actions } from 'astro:actions';

  interface Props {
    teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
    deaths: GetDeathsRes;
  }

  const { teams, deaths }: Props = $props();
</script>

<div class="card bg-base-300 shadow-sm w-full md:w-5/7 xl:w-4/7 sm:p-5 md:p-10">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th>Team</th>
        <th>Spieler 1</th>
        <th>Spieler 2</th>
        <th>Kills</th>
      </tr>
    </thead>
    <tbody>
      {#each teams as team (team.id)}
        <tr>
          <td>
            <Team name={team.name} color={team.color} />
          </td>
          <td class="max-w-9 overflow-ellipsis">
            {#if team.memberOne.id}
              <div class="flex items-center gap-x-2">
                <img class="w-4 h-4 pixelated" src={Steve.src} alt="head" />
                <span
                  class="text-xs sm:text-md"
                  class:line-through={deaths.find((d) => d.deadUserId === team.memberOne.id)}
                  >{team.memberOne.username}</span
                >
              </div>
            {/if}
          </td>
          <td>
            {#if team.memberTwo.id}
              <div class="flex items-center gap-x-2">
                <img class="w-4 h-4 pixelated" src={Steve.src} alt="head" />
                <span
                  class="text-xs sm:text-md"
                  class:line-through={deaths.find((d) => d.deadUserId === team.memberTwo.id)}
                  >{team.memberTwo.username}</span
                >
              </div>
            {/if}
          </td>
          <td>
            <span class="text-xs sm:text-md">0</span>
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</div>
