<script setup lang="ts">
withDefaults(defineProps<{ title: string; description?: string; labelledBy?: string }>(), { description: '' })
</script>

<template>
  <section class="ks-form-section" :aria-labelledby="labelledBy">
    <header class="ks-form-section__header">
      <h2 :id="labelledBy">{{ title }}</h2>
      <p v-if="description">{{ description }}</p>
      <div v-if="$slots.actions" class="ks-form-section__actions"><slot name="actions" /></div>
    </header>
    <div class="ks-form-section__content"><slot /></div>
  </section>
</template>

<style scoped>
.ks-form-section { display: flex; flex-direction: column; gap: var(--ks-space-3); margin-bottom: var(--ks-space-6); }
.ks-form-section__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ks-space-2); padding-bottom: var(--ks-space-2); border-bottom: 1px solid var(--ks-color-neutral-200); }
h2 { margin: 0; font-size: var(--ks-font-section); line-height: var(--ks-line-section); }
p { grid-column: 1; margin: 0; color: var(--ks-color-neutral-600); font-size: var(--ks-font-caption); }
.ks-form-section__actions { grid-column: 2; grid-row: 1 / -1; display: flex; align-items: center; gap: var(--ks-space-2); }
.ks-form-section__content { min-width: 0; }
</style>
