<script setup lang="ts">
withDefaults(
  defineProps<{
    label: string;
    variant?: 'pending' | 'won' | 'lost' | 'push' | 'closed' | 'settled';
    size?: 'sm' | 'md' | 'lg';
  }>(),
  { variant: 'pending', size: 'md' },
);
</script>

<template>
  <span class="status-watermark" :class="[variant, size]">{{ label }}</span>
</template>

<style scoped>
.status-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.15;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
}

.status-watermark.sm {
  font-size: 22px;
}

.status-watermark.md {
  font-size: 28px;
}

.status-watermark.lg {
  font-size: 34px;
}

.status-watermark.won {
  color: #059669;
}

.status-watermark.lost {
  color: #DC2626;
}

.status-watermark.push {
  color: #6B7280;
}

.status-watermark.pending {
  color: #F8971F;
}

.status-watermark.closed {
  color: #005B9F;
}

.status-watermark.settled {
  color: #0066CC;
}
</style>
