<script lang="ts">
    import type {Team} from "../../../types/team.js";
    import {brightness, colorFromTeam, lighten} from "../../util.js";

    export let team: Team;

    let hover = false;
</script>

<div class="rounded w-fit p-2 border-gray-600 border cursor-grab select-none m-1 flex place-items-center"
     style:background-color={hover ? lighten(colorFromTeam(team)) : colorFromTeam(team)} class:text-black={brightness(colorFromTeam(team))} draggable="true"
     on:dragstart
    on:mouseenter={() => hover = true}
    on:mouseleave={() => hover = false}>
    <span>{team.name}</span>
</div>

