import type { JSX } from 'react';
import React from 'react';
import { HelpTooltip } from '@theorchard/suite-components';
import './labeled-item.scss';

const LabeledItem = (props: {
    labelName: string;
    labelValue?: string | number | null | JSX.Element;
    helpTooltip?: {
        id: string;
        message: string;
    };
}) => {
    const { labelName, labelValue, helpTooltip } = props;
    return (
        <div className="LabeledItem">
            <div className="label">
                {labelName}
                {helpTooltip && (
                    <HelpTooltip
                        id={helpTooltip.id}
                        testId={helpTooltip.id}
                        message={helpTooltip.message}
                        tooltipPlacement="right"
                    />
                )}
            </div>
            <div className="item">{labelValue || '—'}</div>
        </div>
    );
};

export default LabeledItem;