<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits([
    "update:visible"
])

const areTooltipsHidden = ref(true)

function toggleTooltips() {
    areTooltipsHidden.value = !areTooltipsHidden.value;
    emit("update:visible", !areTooltipsHidden.value)
}

</script>

<template>
    <div :class="areTooltipsHidden ? 'w-fit' : 'w-5/12'" class="hidden xl:flex items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
            T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
        </button>
        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
            <slot></slot>
        </div>
    </div>
</template>