<template>
  <section class="form-section" :class="sectionClass">
    <header v-if="hasHeader" class="form-section-header">
      <div class="form-section-heading">
        <p v-if="eyebrow" class="form-section-eyebrow">{{ eyebrow }}</p>
        <h3 v-if="title" class="form-section-title">{{ title }}</h3>
        <p v-if="description" class="form-section-description">{{ description }}</p>
      </div>

      <div v-if="$slots.actions" class="form-section-actions">
        <slot name="actions" />
      </div>
    </header>

    <div class="form-section-grid">
      <slot />
    </div>
  </section>
</template>

<script setup>
import { computed, useSlots } from "vue";

const props = defineProps({
  eyebrow: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  },
  description: {
    type: String,
    default: ""
  },
  columns: {
    type: [Number, String],
    default: 2,
    validator: (value) => [1, 2, 3, "1", "2", "3"].includes(value)
  }
});

const slots = useSlots();

const normalizedColumns = computed(() => Number(props.columns) || 2);
const hasHeader = computed(() => Boolean(props.eyebrow || props.title || props.description || slots.actions));

const sectionClass = computed(() => ({
  [`form-section-columns-${normalizedColumns.value}`]: true
}));
</script>
