import { Divider } from '../ui/divider';
import { Heading } from '../ui/heading';
import { Spacer } from '../ui/spacer';
import { FhirQuantity } from '../index.ts';

interface FhirRatioProps {
    label: string;
    context: string
}

const FhirRatio = ({ context, label }: FhirRatioProps) => {
    return (
        <>
            <Heading level={4}>{label}</Heading>
            <Divider margin="2"/>
            <Spacer margin="8"/>

            <FhirQuantity label="Numerator value"
                          context={`${context}.numerator`}/>

            <Spacer margin="24px"/>

            <FhirQuantity label="Denominator value"
                          context={`${context}.denominator`}/>
        </>
    );
};

export default FhirRatio;