<template>
  <div 
    class="relative flex flex-col border-2"
    :class="className"
    :style="{ borderColor: borderColor, backgroundColor: bgColor }"
  >
    <div v-if="title" class="absolute -top-3 left-2 bg-[#1b1026] px-1 z-10">
      <span class="text-[10px] font-bold tracking-widest uppercase text-[#8f80a0]">{{ title }}</span>
    </div>
    <div class="flex-grow">
      <slot />
    </div>
    
    <!-- Corner Pixels for decoration -->
    <div class="absolute -top-1 -left-1 w-1 h-1 bg-[#1b1026]" />
    <div class="absolute -top-1 -right-1 w-1 h-1 bg-[#1b1026]" />
    <div class="absolute -bottom-1 -left-1 w-1 h-1 bg-[#1b1026]" />
    <div class="absolute -bottom-1 -right-1 w-1 h-1 bg-[#1b1026]" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  title?: string;
  className?: string;
  variant?: 'default' | 'inset';
  highlight?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  className: '',
  variant: 'default',
  highlight: false
});

const borderColor = computed(() => props.highlight ? '#f6b26b' : '#4a3b5e');
const bgColor = computed(() => props.variant === 'inset' ? '#0f0816' : '#1b1026');
</script>
