<script setup lang="ts">
import UiIcon from '../Icon.vue'

withDefaults(
  defineProps<{
    headline?: string
    title?: string
    description?: string
    icon?: string
  }>(),
  {
    headline: undefined,
    title: '',
    description: '',
    icon: undefined,
  },
)
</script>

<template>
  <div class="relative border-b border-border py-8">
    <div
      v-if="headline || $slots.headline"
      class="mb-4 text-sm font-semibold text-primary flex items-center gap-1.5"
    >
      <slot name="headline">
        {{ headline }}
      </slot>
    </div>

    <div class="flex flex-col lg:flex-row items-start gap-6">
      <div v-if="icon || $slots.icon" class="flex">
        <slot name="icon">
          <UiIcon
            :name="icon as string"
            class="w-10 h-10 flex-shrink-0 text-primary"
          />
        </slot>
      </div>

      <div class="flex-1">
        <div
          class="flex flex-col lg:flex-row lg:items-center lg:justify-between"
        >
          <h1
            :class="
              cn(
                'text-3xl sm:text-4xl font-bold tracking-tight',
                $attrs.titleClass,
              )
            "
          >
            <slot name="title">
              {{ title }}
            </slot>
          </h1>

          <div
            v-if="$slots.links"
            class="flex flex-wrap items-center gap-1.5 mt-4 lg:mt-0"
          >
            <slot name="links" />
          </div>
        </div>

        <p
          v-if="description || $slots.description"
          :class="cn('mt-4 text-lg text-muted-foreground', $attrs.descriptionClass)"
        >
          <slot name="description">
            {{ description }}
          </slot>
        </p>

        <slot />
      </div>
    </div>
  </div>
</template>
