<template>
  <div :class="['guild-divider', spacing]" role="separator" aria-hidden="true">
    <!-- Woodcut: irregular hand-drawn line -->
    <svg
      v-if="variant === 'woodcut'"
      viewBox="0 0 800 12"
      preserveAspectRatio="none"
      class="w-full h-3 text-guild-600"
    >
      <path
        d="M0,6 Q50,3 100,7 T200,5 T300,8 T400,4 T500,7 T600,5 T700,8 T800,6"
        stroke="currentColor"
        stroke-width="1.5"
        fill="none"
        stroke-dasharray="8,3,15,4,6,5"
      />
    </svg>

    <!-- Dither: warm amber dithered line -->
    <div v-else-if="variant === 'dither'" class="h-px dithered-warm opacity-60" />

    <!-- Dots: halftone dot row -->
    <div
      v-else-if="variant === 'dots'"
      class="h-2 halftone-texture opacity-30"
    />

    <!-- Simple: plain rule -->
    <hr v-else class="border-guild-700" />
  </div>
</template>

<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'simple',
    validator: (v) => ['simple', 'woodcut', 'dither', 'dots'].includes(v),
  },
  compact: {
    type: Boolean,
    default: false,
  },
})

const spacing = computed(() => props.compact ? 'my-4' : 'my-8')
</script>
