<script setup lang="ts">
import { useForwardExpose } from 'reka-ui';
import { ResizablePanel } from '@/components/core/resizable';
import type { UiResizablePanelEmits, UiResizablePanelProps } from './types';

defineOptions({
  name: 'UiResizablePanel',
});

const props = defineProps<UiResizablePanelProps>();
const emit = defineEmits<UiResizablePanelEmits>();
const { forwardRef } = useForwardExpose();

function handleResize(size: number, prevSize: number | undefined) {
  emit('resize', size, prevSize);
}
</script>

<template>
  <ResizablePanel
    :ref="forwardRef"
    v-slot="slotProps"
    v-bind="props"
    @collapse="emit('collapse')"
    @expand="emit('expand')"
    @resize="handleResize"
  >
    <slot v-bind="slotProps" />
  </ResizablePanel>
</template>
