<template>
  <h2 class="section_header" @click="section_toggle">
    {{ name }} <span class="section_button">{{ visible ? '-' : '+' }}</span>
  </h2>
  <div :class="{ section_grid: grid }" v-show="visible">
    <slot></slot>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'

const props = defineProps({ name: String, grid: Boolean })
const visible = ref(true)
const section_toggle = () => visible.value = !visible.value
</script>

<style>
.section_header {
  border-bottom: 1px solid #586e75;
  cursor: pointer;
  font-size: 18px;
  font-weight: normal;
}

.section_button {
  font-family: monospace;
}

.section_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 800px) {
  .section_grid {
    grid-template-columns: 1fr;
  }
}
</style>
