<script setup lang="ts">
const props = defineProps<{
  keepScrollPositionId?: string
}>()
const el = ref()
const id = `UiDashboardPanelContent:${props.keepScrollPositionId}`
const scrollTop = computed({
  get(): number {
    return el.value?.scrollTop ?? 0
  },
  set(value) {
    el.value!.scrollTop = value
  },
})
onDeactivated(() => {
  if (id) {
    sessionStorage.setItem(id, String(scrollTop.value))
  }
})
onActivated(() => {
  if (id) {
    scrollTop.value = Number.parseInt(sessionStorage.getItem(id) ?? '0')
  }
})
</script>

<template>
  <div ref="el" class="flex-1 flex flex-col overflow-y-auto">
    <div class="p-4" :class="$attrs.containerClass">
      <slot />
    </div>
    <slot name="bottom" />
  </div>
</template>
