# src/admin/components/base/BaseControl.vue
<template>
  <div class="control-section">
    <div>
      <h3 class="control-title">{{ title }}</h3>
      <p class="control-description">
        {{ description }}
      </p>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  }
});
</script>

<style scoped>
.control-section {
  background-color: var(--color-cool-gray);
  padding: 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 0.5rem;
}

.control-description {
  font-size: 0.9rem;
  color: var(--color-navy);
}
</style>