// Project Status Badge Component
// Displays project status with Italian labels and color coding

/**
 * Project status configuration
 */
const PROJECT_STATUS_CONFIG = {
    PENDING: {
        color: 'bg-slate-100 text-slate-700',
        dotColor: 'bg-slate-500',
        label: 'In Attesa'
    },
    IN_PROGRESS: {
        color: 'bg-amber-100 text-amber-700',
        dotColor: 'bg-amber-500',
        label: 'In Corso'
    },
    COMPLETED: {
        color: 'bg-emerald-100 text-emerald-700',
        dotColor: 'bg-emerald-500',
        label: 'Completato'
    },
    ON_HOLD: {
        color: 'bg-blue-100 text-blue-700',
        dotColor: 'bg-blue-500',
        label: 'In Pausa'
    },
};

/**
 * Get project status configuration
 * @param {string} status - Project status (PENDING, IN_PROGRESS, COMPLETED, ON_HOLD)
 * @returns {Object} Status configuration with color, dotColor, label
 */
const getProjectStatusConfig = (status) => {
    return PROJECT_STATUS_CONFIG[status] || PROJECT_STATUS_CONFIG.PENDING;
};

/**
 * Project Status Badge Component
 * Displays a badge with dot indicator for project status
 *
 * @param {Object} props
 * @param {string} props.status - Project status
 * @param {boolean} props.showDot - Whether to show the dot indicator (default: true)
 * @param {boolean} props.showLabel - Whether to show the status label (default: false)
 * @param {string} props.projectName - Optional project name to display instead of status label
 * @param {string} props.className - Additional CSS classes
 */
const ProjectStatusBadge = ({
    status,
    showDot = true,
    showLabel = false,
    projectName = null,
    className = ''
}) => {
    const config = getProjectStatusConfig(status);

    return (
        <span
            className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${config.color} ${className}`}
            title={`${config.label}${projectName ? ` - ${projectName}` : ''}`}
        >
            {showDot && (
                <span className={`w-1.5 h-1.5 rounded-full ${config.dotColor}`}></span>
            )}
            <span className="truncate max-w-[120px]">
                {projectName || (showLabel ? config.label : null)}
            </span>
        </span>
    );
};

/**
 * Compact Project Status Indicator
 * Just the colored dot without text
 */
const ProjectStatusDot = ({ status, size = 'md', className = '' }) => {
    const config = getProjectStatusConfig(status);
    const sizes = {
        sm: 'w-2 h-2',
        md: 'w-2.5 h-2.5',
        lg: 'w-3 h-3',
    };

    return (
        <span
            className={`inline-block rounded-full ${config.dotColor} ${sizes[size]} ${className}`}
            title={config.label}
        />
    );
};

// Export to global scope
window.ProjectStatusBadge = ProjectStatusBadge;
window.ProjectStatusDot = ProjectStatusDot;
window.PROJECT_STATUS_CONFIG = PROJECT_STATUS_CONFIG;
window.getProjectStatusConfig = getProjectStatusConfig;