<template>
  <section class="setting-section">
    <div class="label-container">
      <div class="label">{{ title }}</div>
      <div class="label-desc">{{ description }}</div>
    </div>

    <div :class="['context-container', contentClass]">
      <slot />
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  description: string
  contentClass?: string
}>()
</script>

<style lang="less" scoped>
.setting-section {
  display: flex;
  column-gap: 21.4rem;
  justify-content: center;
}

.label-container {
  width: 27.6rem;
  font-family: 'KaiseiOpti-Medium';
}

.label {
  font-size: 2.8rem;
  line-height: 3.6rem;
  color: #232323;
}

.label-desc {
  width: 24rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #666666;
}

.context-container {
  width: 58rem;
  padding-top: 0.2rem;
}
</style>
