<template>
  <section :class="sectionClasses">
    <div :class="contentClasses">
      <div :class="['space-y-3', maxWidthClass]">
        <component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
          {{ title }}
        </component>
        <p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
          {{ subtitle }}
        </p>
        <slot />
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  gradientFrom: {
    type: String,
    default: 'from-primary'
  },
  gradientTo: {
    type: String,
    default: 'to-secondary'
  },
  minHeight: {
    type: String,
    default: 'min-h-[25vh]'
  },
  maxWidth: {
    type: String,
    default: 'max-w-xl'
  },
  rounded: {
    type: Boolean,
    default: false
  },
  alignment: {
    type: String,
    default: 'center',
    validator: value => ['center', 'start', 'end'].includes(value)
  },
  headingTag: {
    type: String,
    default: 'h1'
  }
})

const sectionClasses = computed(() => {
  const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
  if (props.rounded) {
    classes.push('rounded-xl', 'overflow-hidden')
  }
  return classes
})

const contentClasses = computed(() => {
  const base = ['hero-content', 'text-neutral-content']
  if (props.alignment === 'center') {
    base.push('text-center')
  } else if (props.alignment === 'start') {
    base.push('justify-start', 'text-left')
  } else if (props.alignment === 'end') {
    base.push('justify-end', 'text-right')
  }
  return base
})

const maxWidthClass = computed(() => props.maxWidth)
</script>
