/**
 * StatusBadge Component
 * 
 * @param {Object} props Component props
 * @param {string} props.status Status text to display
 * @param {string} props.color Color of the badge (green, red, orange, gray)
 * @returns {JSX.Element} Status badge component
 */
const StatusBadge = ({ status, color = 'gray' }) => {
    const getColorClasses = () => {
        switch (color) {
            case 'green':
                return 'bg-green-100 text-green-800 border-green-200';
            case 'red':
                return 'bg-red-100 text-red-800 border-red-200';
            case 'orange':
                return 'bg-orange-100 text-orange-800 border-orange-200';
            case 'gray':
            default:
                return 'bg-gray-100 text-gray-800 border-gray-200';
        }
    };

    return (
        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getColorClasses()}`}>
            {status}
        </span>
    );
};

export default StatusBadge;