import React from 'react';
import { Quantity } from 'fhir/r4';

interface FhirQuantityDisplayProps {
    quantity: Quantity | undefined | null;
    className?: string;
    emptyText?: string;
}

export const formatFhirQuantity = (quantity: Quantity | undefined | null): string => {
    if (!quantity) {
        return '';
    }

    const value = quantity.value ?? '';
    const unit = quantity.code || quantity.unit || '';
    const comparator = quantity.comparator || '';

    if (value === '' && !unit && !comparator) {
        return '';
    }

    return `${comparator}${value}${unit ? ` ${unit}` : ''}`.trim();
};

export const FhirQuantityDisplay: React.FC<FhirQuantityDisplayProps> = ({
                                                                            quantity,
                                                                            className,
                                                                            emptyText = ''
                                                                        }) => {
    const formattedQuantity = formatFhirQuantity(quantity);

    return (
        <span className={className}>{formattedQuantity || emptyText || '-'}</span>
    );
};