<script lang="ts" setup>
import type { ImageResult } from './ImageContainer.vue'
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '~/components/ui/resizable'

defineProps<{
  imageResult: ImageResult
}>()

defineEmits(['submit'])
</script>

<template>
  <div flex="~ row h-full items-begin justify-stretch gap-3 p-8 w-full">
    <ResizablePanelGroup
      id="demo-group-1"
      direction="horizontal"
      class="w-full border rounded-lg"
    >
      <ResizablePanel id="demo-panel-1" :default-size="200" py-5>
        <ParamsCard
          @submit="$emit('submit')"
        >
          <slot />
        </ParamsCard>
      </ResizablePanel>
      <ResizableHandle id="demo-handle-1" />
      <ResizablePanel id="demo-panel-2" :default-size="500">
        <ImageContainer :image-result="imageResult" />
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
</template>
