"use client";

import { Badge } from "@/components/ui/badge";
import { ProjectStatus } from "@/types/project";

/**
 * Configuración unificada de colores para estados de proyecto.
 * 
 * Lógica de colores:
 * - Borrador (0): Gris - Estado neutro, pendiente de activación
 * - Abierto (1): Azul - Proyecto activo, en progreso
 * - Cerrado (2): Verde - Proyecto completado exitosamente
 */
export const PROJECT_STATUS_CONFIG: Record<ProjectStatus, { 
  label: string; 
  lightClasses: string;
  darkClasses: string;
}> = {
  '0': { 
    label: "Borrador", 
    lightClasses: "bg-gray-100 text-gray-700 border-gray-300",
    darkClasses: "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600",
  },
  '1': { 
    label: "Abierto", 
    lightClasses: "bg-blue-100 text-blue-700 border-blue-300",
    darkClasses: "dark:bg-blue-900/40 dark:text-blue-300 dark:border-blue-700",
  },
  '2': { 
    label: "Cerrado", 
    lightClasses: "bg-green-100 text-green-700 border-green-300",
    darkClasses: "dark:bg-green-900/40 dark:text-green-300 dark:border-green-700",
  }
};

interface ProjectStatusBadgeProps {
  status: ProjectStatus;
  className?: string;
}

/**
 * Badge de estado de proyecto unificado.
 * Usar este componente en toda la aplicación para mantener consistencia.
 */
export function ProjectStatusBadge({ status, className = "" }: ProjectStatusBadgeProps) {
  const config = PROJECT_STATUS_CONFIG[status] || PROJECT_STATUS_CONFIG['0'];
  
  return (
    <Badge 
      variant="outline" 
      className={`${config.lightClasses} ${config.darkClasses} ${className}`}
    >
      {config.label}
    </Badge>
  );
}