<script lang="ts" setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

type Props = {
  size?: number
  lMinSize?: number
  lMaxSize?: number
  rMinSize?: number
  rMaxSize?: number
}

interface configType {
  config?: Props
}

withDefaults(defineProps<configType>(), {
  config: () => ({
    size: 20
  })
})
</script>

<template>
  <Splitpanes class="default-theme">
    <Pane :size="config.size" :min-size="config.lMinSize" :max-size="config.lMaxSize">
      <slot name="left" />
    </Pane>
    <Pane :min-size="config.lMinSize" :max-size="config.lMaxSize">
      <slot name="right" />
    </Pane>
  </Splitpanes>
</template>

<style lang="scss" scoped></style>
