<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.2;
  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: #3db865;
}

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

.status-watermark.push {
  color: #888;
}

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

.status-watermark.closed {
  color: #c9a84a;
}

.status-watermark.settled {
  color: #7a9ab8;
}
</style>
