<template>
  <section :id="id">
    <SectionHeader v-if="title" :title="title"></SectionHeader>
    <div class="content-area">
      <div :class="{ 'grid-container': hasGrid }">
        <slot></slot>
      </div>
    </div>
  </section>
</template>

<script>
import SectionHeader from "./SectionHeader.vue";
import { str2bool } from "../../util";

export default {
  name: "bc-section",
  props: {
    id: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
    has_grid: {
      type: [Boolean, String],
      default: true,
    },
  },
  components: {
    SectionHeader,
  },
  computed: {
    hasGrid() {
      return str2bool(this.has_grid);
    },
  },
};
</script>