<template>
  <div
    class="art-card rounded-2xl pointer-events-none relative overflow-hidden !border-dashed !border-art-border"
    :class="span === 2 ? 'md:col-span-2' : ''"
    aria-hidden="true"
  >
    <div class="absolute inset-0 opacity-40">
      <div class="absolute top-6 left-6 w-10 h-px bg-art-accent/40"></div>
      <div class="absolute top-6 left-6 w-px h-10 bg-art-accent/40"></div>
      <div class="absolute bottom-6 right-6 w-10 h-px bg-art-accent/30"></div>
      <div class="absolute bottom-6 right-6 w-px h-10 bg-art-accent/30"></div>
    </div>
    <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 px-6">
      <div class="w-12 h-px bg-gradient-to-r from-transparent via-art-accent/50 to-transparent"></div>
      <span class="font-mono text-[10px] tracking-[0.35em] uppercase text-art-muted/50">···</span>
      <div class="w-12 h-px bg-gradient-to-r from-transparent via-art-accent/50 to-transparent"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  span?: 1 | 2
}>(), {
  span: 1,
})
</script>
