<template>
  <div class="relative h-px" :class="spacingClasses">
    <div
      class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
      :class="lineClasses"
    />
    <div
      v-if="glow"
      class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent blur-sm"
      :class="glowClasses"
    />
    <div
      v-if="glow && intensity === 'strong'"
      class="absolute -inset-1 bg-gradient-to-r from-transparent to-transparent blur-xl"
      :class="glowXlClasses"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  /** Show glow effect */
  glow: {
    type: Boolean,
    default: true,
  },
  /** Glow color preset */
  color: {
    type: String,
    default: 'primary',
    validator: (v) => ['primary', 'secondary', 'neutral', 'cyan', 'blue', 'purple', 'white'].includes(v),
  },
  /** Glow strength */
  intensity: {
    type: String,
    default: 'medium',
    validator: (v) => ['subtle', 'medium', 'strong'].includes(v),
  },
  /** Vertical margin */
  spacing: {
    type: String,
    default: 'my-16',
  },
})

const spacingClasses = computed(() => props.spacing)

const lineClasses = computed(() => {
  const colors = {
    primary: 'via-primary-500/50',
    secondary: 'via-secondary-500/50',
    neutral: 'via-neutral-500/30',
    cyan: 'via-cyan-500/50',
    blue: 'via-blue-500/50',
    purple: 'via-purple-500/50',
    white: 'via-white/30',
  }
  return colors[props.color]
})

const glowClasses = computed(() => {
  const colors = {
    primary: 'via-primary-400',
    secondary: 'via-secondary-400',
    neutral: 'via-neutral-400',
    cyan: 'via-cyan-400',
    blue: 'via-blue-400',
    purple: 'via-purple-400',
    white: 'via-white',
  }
  return colors[props.color]
})

const glowXlClasses = computed(() => {
  const colors = {
    primary: 'via-primary-500/20',
    secondary: 'via-secondary-500/20',
    neutral: 'via-neutral-500/20',
    cyan: 'via-cyan-500/20',
    blue: 'via-blue-500/20',
    purple: 'via-purple-500/20',
    white: 'via-white/20',
  }
  return colors[props.color]
})
</script>
