<script setup>
const props = defineProps({
  title: String,
  index: Number,
  itemSides: Object,
});
const titleStyle = {
  lineHeight: 18,
  width: props.itemSides.width,
  height: 18,
  backgroundColor: "rgba(0,0,255,0.7)",
};
const blockOpacity = props.index % 2 === 0 ? 0.2 : 0.5;
</script>

<template>
  <div>
    <div class="container-font" :style="titleStyle">
      {{ title }}
    </div>
    <div
      key="blockColor"
      :style="{
        top: titleStyle.lineHeight,
        width: itemSides.width,
        height: itemSides.height - 18,
        backgroundColor: 'rgba(0,0,255,' + blockOpacity + ')',
      }"
    ></div>
    <div key="container" :style="{ top: titleStyle.lineHeight }">
      <slot></slot>
    </div>
  </div>
</template>

<style>
@import "./FontStyle.css";
</style>