<template>
  <div class="custom-block" :class="{ 'inline-block': props.inline }">
    <slot name="title">
      <div v-if="props.title" class="default-custom-block-title" :class="{ 'inline-block': props.inline }">
        {{ props.title }}
      </div>
    </slot>
    <slot></slot>
  </div>
</template>

<script setup lang="ts" name="CustomBlock">
import type { VNode } from 'vue'
const props = defineProps<{
  title?: string | VNode
  inline?: boolean
}>()
</script>

<style scoped lang="scss">
.custom-block {
  .default-custom-block-title {
    color: $BlockTitleColor;
    font-size: $BaseFont;
    margin-bottom: $ExtraBaseGapSpace;
  }
}
</style>
