<template>
  <div :class="spacing">
    <div class="relative" :class="heightClass">
      <!-- Line -->
      <div
        class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
        :class="lineClass"
      />
      <!-- Small glow -->
      <div
        v-if="intensity !== 'none'"
        class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
        :class="[smallGlowClass, blurSmClass]"
      />
      <!-- Large glow -->
      <div
        v-if="intensity === 'medium' || intensity === 'strong'"
        class="absolute bg-gradient-to-r from-transparent to-transparent"
        :class="[largeGlowClass, blurLgClass, largeGlowInset]"
      />
      <!-- Extra large glow for strong -->
      <div
        v-if="intensity === 'strong'"
        class="absolute bg-gradient-to-r from-transparent to-transparent blur-2xl"
        :class="[extraGlowClass, extraGlowInset]"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  /** Color theme - any Tailwind color or 'white' */
  color: {
    type: String,
    default: 'primary',
  },
  /** Vertical spacing (padding) */
  spacing: {
    type: String,
    default: 'py-16',
  },
  /** Glow intensity */
  intensity: {
    type: String,
    default: 'medium',
    validator: (v) => ['none', 'subtle', 'medium', 'strong'].includes(v),
  },
  /** Line height */
  height: {
    type: String,
    default: 'default',
    validator: (v) => ['thin', 'default', 'thick'].includes(v),
  },
})

const heightClass = computed(() => {
  const heights = {
    thin: 'h-px',
    default: 'h-0.5',
    thick: 'h-1',
  }
  return heights[props.height]
})

// Line classes - handle white/neutral specially
const lineClass = computed(() => {
  if (props.color === 'white') return 'via-white/50'
  if (props.color === 'neutral') return 'via-neutral-400/50'
  return `via-${props.color}-500/50`
})

// Small glow blur based on intensity
const blurSmClass = computed(() => {
  const blurs = {
    none: '',
    subtle: 'blur-[2px]',
    medium: 'blur-sm',
    strong: 'blur-sm',
  }
  return blurs[props.intensity]
})

const smallGlowClass = computed(() => {
  if (props.color === 'white') return 'via-white/60'
  if (props.color === 'neutral') return 'via-neutral-300/60'
  return `via-${props.color}-400/60`
})

// Large glow blur based on intensity
const blurLgClass = computed(() => {
  const blurs = {
    none: '',
    subtle: 'blur-md',
    medium: 'blur-xl',
    strong: 'blur-xl',
  }
  return blurs[props.intensity]
})

const largeGlowInset = computed(() => {
  return props.intensity === 'strong' ? '-inset-2' : '-inset-1'
})

const largeGlowClass = computed(() => {
  if (props.color === 'white') return 'via-white/30'
  if (props.color === 'neutral') return 'via-neutral-400/30'
  return `via-${props.color}-500/30`
})

// Extra glow for strong intensity
const extraGlowInset = '-inset-4'

const extraGlowClass = computed(() => {
  if (props.color === 'white') return 'via-white/20'
  if (props.color === 'neutral') return 'via-neutral-400/20'
  return `via-${props.color}-500/20`
})
</script>
