<script lang="ts">
    import type { Team } from "@type/team.ts";
    import { fightConnector } from "./connections.svelte";
    import { teamHoverService } from "./team-hover.svelte";

    const {
        team,
        score = "",
        time = false,
        showWinner = false,
        isWinner = false,
        noWinner = false,
        id,
    }: {
        team: Team;
        score?: string;
        time?: boolean;
        showWinner?: boolean;
        isWinner?: boolean;
        noWinner?: boolean;
        id?: string;
    } = $props();

    let hoverService = $teamHoverService;
</script>

<button
    class="flex justify-between px-2 w-full team-chip text-left {time ? 'py-1 hover:bg-gray-800' : 'py-3 cursor-pointer'} team-{team.id} {hoverService.currentHover === team.id
        ? 'bg-gray-800'
        : ''} {showWinner ? 'border-l-4' : ''} {showWinner && isWinner ? 'border-l-yellow-500' : 'border-l-gray-950'}"
    onmouseenter={() => team.id === -1 || hoverService.setHover(team.id)}
    onmouseleave={() => team.id === -1 || hoverService.clearHover()}
    {id}
>
    <div class="flex">
        <div class="w-12 {time ? 'font-bold' : ''}">{team.kuerzel}</div>
        <span class={time ? "font-mono" : "font-bold"}>{team.name}</span>
    </div>
    <div class="{showWinner && isWinner && 'font-bold'} {isWinner ? 'text-yellow-400' : ''} {noWinner ? 'font-bold' : ''}">
        {score}
    </div>
</button>

<style>
    .team-chip:not(:last-child) {
        @apply border-b border-b-gray-700;
    }
</style>
