<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

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

    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}
     role="figure">
    <span>{team.name}</span>
</div>

