<script lang="ts" setup>
defineProps<{
  title: string
  bootsFirst?: number
  sizePerc?: number
}>()
</script>

<template>
  <div
    :style="
      sizePerc != undefined && sizePerc != null ? 'max-height: ' + sizePerc * 600 + 'px;' : ''
    "
    class="item-box"
  >
    <div
      style="display: flex; flex-direction: column; justify-content: center; align-items: center"
    >
      <h2 class="item-box-title">{{ title }}</h2>
      <h5 v-if="bootsFirst != undefined && bootsFirst != null" style="margin: auto">
        ({{ (bootsFirst * 100).toFixed(2) }}%)
      </h5>
    </div>
    <slot />
  </div>
</template>

<style scoped>
.item-box {
  border: 1px solid var(--color-on-surface);
  border-radius: 8px;

  margin: 10px;

  width: fit-content;
  height: 600px;
}
.item-box-title {
  font-variant: small-caps;
  text-align: center;
  margin: 10px;
}
@media only screen and (max-width: 1000px) {
  .item-box {
    width: 95%;
    height: fit-content;
  }
}
</style>
