<script setup>
/**
 * Status Badge component.
 * 
 * Displays a colored badge for status indicators.
 * 
 * @example
 * <StatusBadge status="active" />
 * <StatusBadge status="inactive" />
 * <StatusBadge :active="item.is_active" />
 * <StatusBadge variant="success" label="Completado" />
 */

const props = defineProps({
    // Predefined status strings
    status: {
        type: String,
        default: null,
        validator: (value) => value === null || [
            'active', 'inactive', 'pending', 'completed', 'cancelled',
            'paid', 'unpaid', 'draft', 'published'
        ].includes(value),
    },
    // Direct active boolean
    active: {
        type: Boolean,
        default: null,
    },
    // Direct variant selection
    variant: {
        type: String,
        default: null,
        validator: (value) => value === null || [
            'success', 'danger', 'warning', 'info', 'gray', 'orange'
        ].includes(value),
    },
    // Custom label text
    label: {
        type: String,
        default: null,
    },
    // Size
    size: {
        type: String,
        default: 'md',
        validator: (value) => ['sm', 'md', 'lg'].includes(value),
    },
    // With dot indicator
    dot: {
        type: Boolean,
        default: false,
    },
});

// Status to variant mapping
const statusVariants = {
    active: 'success',
    inactive: 'danger',
    pending: 'warning',
    completed: 'success',
    cancelled: 'danger',
    paid: 'success',
    unpaid: 'danger',
    draft: 'gray',
    published: 'success',
};

// Status to label mapping
const statusLabels = {
    active: 'Activo',
    inactive: 'Inactivo',
    pending: 'Pendiente',
    completed: 'Completado',
    cancelled: 'Cancelado',
    paid: 'Pagado',
    unpaid: 'No pagado',
    draft: 'Borrador',
    published: 'Publicado',
};

// Variant classes
const variantClasses = {
    success: 'bg-green-100 text-green-800',
    danger: 'bg-red-100 text-red-800',
    warning: 'bg-yellow-100 text-yellow-800',
    info: 'bg-blue-100 text-blue-800',
    gray: 'bg-gray-100 text-gray-800',
    orange: 'bg-orange-100 text-orange-800',
};

// Dot variant classes
const dotClasses = {
    success: 'bg-green-400',
    danger: 'bg-red-400',
    warning: 'bg-yellow-400',
    info: 'bg-blue-400',
    gray: 'bg-gray-400',
    orange: 'bg-orange-400',
};

// Size classes
const sizeClasses = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-1 text-xs',
    lg: 'px-3 py-1.5 text-sm',
};

// Compute the variant
const computedVariant = () => {
    if (props.variant) return props.variant;
    if (props.status) return statusVariants[props.status];
    if (props.active !== null) return props.active ? 'success' : 'danger';
    return 'gray';
};

// Compute the label
const computedLabel = () => {
    if (props.label) return props.label;
    if (props.status) return statusLabels[props.status];
    if (props.active !== null) return props.active ? 'Activo' : 'Inactivo';
    return 'Sin estado';
};
</script>

<template>
    <span
        :class="[
            'inline-flex items-center font-medium rounded-full',
            variantClasses[computedVariant()],
            sizeClasses[size]
        ]"
    >
        <span
            v-if="dot"
            :class="[
                'mr-1.5 h-1.5 w-1.5 rounded-full',
                dotClasses[computedVariant()]
            ]"
        />
        {{ computedLabel() }}
    </span>
</template>
