<template>
  <div class="container">
    <div class="flex item-center arco-row-justify-space-between">
      <h1 class="title">{{ props.title }}</h1>
      <slot name="header"></slot>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string;
}>();
</script>
<style scoped lang="scss">
.container {
  border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
  background: var(--BG-white, rgba(255, 255, 255, 1));
  padding: 16px 24px 20px 24px;
  border-radius: 8px;
}
.title {
  font-family: $font-family-medium;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
</style>
