<template>
  <rect
    :x="layout.x"
    :y="layout.y"
    :width="layout.width"
    :height="layout.height"
    :rx="radius"
    :ry="radius"
  />
</template>

<script setup lang="ts">
import { AnchorPoint } from '@3cr/types-ts';
import { toRefs } from 'vue';
import { useActiveLayout } from '@/components/modal/layouts/composables/useActiveLayout';

interface Props {
  anchor: AnchorPoint;
  canvas: HTMLCanvasElement;
  padding?: number;
  radius?: number;
}

const props = withDefaults(defineProps<Props>(), {
  padding: 8,
  radius: 8,
});

const { anchor, canvas, padding } = toRefs(props);
const { layout } = useActiveLayout(anchor, canvas, padding);
</script>
