import React, {FC, ReactNode} from "react";
import {__} from "../globals";

export type TextPreSuFixedProps = {
    direction: 'prefix' | 'suffix',
    primary: ReactNode,
    secondary: ReactNode,
}

export const TextPreSuFixed: FC<TextPreSuFixedProps> = ({direction, primary, secondary}) => {
    const secondaryElement = <span className="opacity-60">{secondary}</span>
    const primaryElement = <span>{primary}</span>
    
    return <div className="flex items-center gap-2">
        {direction === 'prefix' ? <>
            {secondaryElement}
            {primaryElement}
        </> : <>
            {primaryElement}
            {secondaryElement}
        </>}
    </div>
}