<script setup lang="ts">
import { FloatType } from "./types";

interface ContainerPanelProps {
  float: FloatType;
}

const config = {
  [FloatType.LEFT.toString()]: {
    left: "1vw",
    right: "0vw",
  },
  [FloatType.RIGHT.toString()]: {
    right: "1vw",
    left: "0vw",
  },
};

const props = defineProps<ContainerPanelProps>();

const float = props.float;
const { left, right } = config[float];
</script>

<template>
  <div class="container-panel">
    <slot />
  </div>
</template>

<style scoped lang="less">
.container-panel {
  float: v-bind(float);
  margin-right: v-bind(right);
  margin-left: v-bind(left);
}
</style>
