<!--
  -   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 {createEventDispatcher} from "svelte";
  interface Props {
    children?: import('svelte').Snippet;
  }

  let { children }: Props = $props();

    let dragover = $state(false);

    function handleDragOver(e) {
        e.preventDefault();
        dragover = true;
    }

    const dispatch = createEventDispatcher();

    function handleDrop(ev: DragEvent) {
        ev.preventDefault();
        dragover = false;
        dispatch("drop", ev);
    }
</script>

<div class="w-56 bg-gray-800 p-4 rounded" class:border={dragover} class:m-px={!dragover} ondrop={handleDrop}
     ondragover={handleDragOver} ondragleave={() => dragover = false} role="none">
    {@render children?.()}
</div>

<style>
    div {
        min-height: 14rem;
    }
</style>
