<script setup lang="ts">
import { UseDraggable } from '@vueuse/components'

let isOpen = $ref<boolean>(false)

function handleClose(){
    isOpen = false
}
defineExpose({
  open() {
    isOpen = true
  },
  close() {
    handleClose()
  }
})
</script>

<template>
  <UseDraggable v-if="isOpen" storage-key="chat-audio" storage-type="session" :initial-value="{ x: 584, y: 207 }"
    class="fixed w-375px h-670px bg-hex-191919 cursor-move z-4000">
    <div class="w-full flex justify-end items-center p-2 text-light-50 h-36px">
      <i:clarity:window-min-line class="cursor-pointer" />
      <i:ic:outline-close class="cursor-pointer" @click="handleClose" />
    </div>
    <div class="h-634px">
      <slot></slot>
    </div>
  </UseDraggable>
</template>

<style scoped>

</style>
