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

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

const props = defineProps<UiResizablePanelGroupProps>();
const emit = defineEmits<UiResizablePanelGroupEmits>();
const { forwardRef } = useForwardExpose();
</script>

<template>
  <ResizablePanelGroup
    :ref="forwardRef"
    v-slot="slotProps"
    v-bind="props"
    @layout="emit('layout', $event)"
  >
    <slot v-bind="slotProps" />
  </ResizablePanelGroup>
</template>
