<template>
  <span :class="badgeClasses">{{ text }}</span>
</template>

<script lang="ts">
import { defineComponent, computed, type PropType } from 'vue';

export type BadgeVariant = 'primary' | 'secondary' | 'accent' | 'settled' | 'pending' | 'success' | 'danger' | 'warning' | 'info' | 'neutral';

export default defineComponent({
  name: 'VBadge',
  props: {
    text: {
      type: String,
      required: true,
    },
    variant: {
      type: String as PropType<BadgeVariant>,
      default: 'secondary',
      validator: (value: string) => ['primary', 'secondary', 'accent', 'settled', 'pending', 'success', 'danger', 'warning', 'info', 'neutral'].includes(value),
    },
    sticky: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const badgeClasses = computed(() => {
      const classes = [
        'item-badge', // Base class from the design document
        `badge-${props.variant}`,
      ];
      // The design doc mentions: "Sticky: (Accent variant only)"
      if (props.sticky && props.variant === 'accent') {
        classes.push('badge-sticky');
      }
      return classes;
    });

    return {
      badgeClasses,
    };
  },
});
</script>

<style lang="scss" scoped>
// Base styles from the design document
.item-badge {
  display: inline-flex;
  padding: 2px 8px; // 2px 8px from design
  border-radius: 16px; // 16px from design
  font-weight: 500; // Medium
  font-size: 12px; // 12px from design
  line-height: 16px; // 16px from design
  text-align: center;
  white-space: nowrap;
}

// Variants from the design document
.badge-secondary {
  background-color: #E9ECEF; // Gray-100
  color: #495057; // Gray-700
}

.badge-accent {
  background-color: #E6F7FF; // Primary-50
  color: #007AFF; // Primary-500
}

.badge-settled {
  background-color: #E6F7F0; // Success-50 (assuming, based on typical color schemes)
  color: #28A745; // Success-700 (assuming)
  // Design doc has #198754 (Success-600) for text and #D1E7DD (Success-100) for background. Let's use those.
  background-color: #D1E7DD;
  color: #198754;
}

.badge-pending {
  background-color: #FFF3E0; // Warning-50 (assuming)
  color: #FFA500; // Warning-700 (assuming)
  // Design doc has #FFC107 (Warning-500) for text and #FFF3CD (Warning-100) for background. Let's use those.
  background-color: #FFF3CD;
  color: #856404; // Using a darker color for better contrast
}

// Sticky style for Accent variant
.badge-sticky {
  // The design doc implies sticky might mean position: sticky, or just a visual treatment.
  // For now, let's assume it's a visual cue or a class that could be used with position: sticky by parent.
  // If it refers to a specific visual change for the badge itself when sticky:
  // e.g., a border, a shadow, or slightly different padding/look.
  // The image shows it on top right, which is a positioning concern, not just a style of the badge itself.
  // Let's add a subtle visual difference for the story, can be refined.
  // For now, we'll assume 'badge-sticky' is a marker class and parent component handles actual stickiness.
  // If it's meant to be position:absolute like in the Figma, that shouldn't be part of this component directly.
  // The design doc description for "Sticky" under "Accent" variant says:
  // "position: absolute; top: -4px; right: -4px;"
  // This kind of positioning is usually context-dependent and best handled by the parent.
  // However, if VBadge is *always* used this way when sticky, it could be added.
  // For now, I will make `badge-sticky` only apply a visual change, not absolute positioning.
  // The parent component can use this class to apply positioning.
  // Example: add a small border to distinguish it slightly when sticky.
  border: 1px solid #007AFF; // Primary-500 (same as text color for accent)
}

.badge-primary {
  background-color: #CCE5FF;
  color: #004085;
}

.badge-success {
  background-color: #D1E7DD;
  color: #198754;
}

.badge-danger {
  background-color: #F8D7DA;
  color: #721C24;
}

.badge-warning {
  background-color: #FFF3CD;
  color: #856404;
}

.badge-info {
  background-color: #D1ECF1;
  color: #0C5460;
}

.badge-neutral {
  background-color: #F8F9FA;
  color: #343A40;
}
</style>
