import { IdIconProps } from '@transferwise/icons'; import { Flag } from '@wise/art'; import { clsx } from 'clsx'; import { cloneElement, ReactElement, ReactNode } from 'react'; import Body from '../../body'; import { Typography } from '../../common'; export type Props = { label: ReactNode; value: T; currency?: string; note?: ReactNode; secondary?: ReactNode; icon?: ReactNode; /** @deprecated */ classNames?: Record; selected?: boolean; testId?: string; }; function Option({ label, currency = '', note = '', secondary = '', icon, selected = false, testId, }: Props) { const iconElement = icon ? cloneElement(icon as ReactElement, { size: 24, className: 'tw-icon', }) : currency && ; const titleAndNoteElement = ( {label} {note && ( {note} )} ); const secondaryElement = secondary && ( {secondary} ); return iconElement ? (

{iconElement}

{titleAndNoteElement} {secondaryElement}

) : ( <> {iconElement} {titleAndNoteElement} {secondaryElement} ); } export default Option;