import { ArrowRight, Check, Download } from '@transferwise/icons';
import { clsx } from 'clsx';
import { ReactElement, ReactNode } from 'react';
import Body from '../body';
import { Typography } from '../common';
import AvatarView from '../avatarView';
export type PromoCardIndicatorProps = {
/** Optional class name(s) to add to the indicator container. */
className?: string;
/** Optional label to display next to the indicator. */
label?: string;
/** Optional icon to display in the indicator. */
icon?: 'check' | 'arrow' | 'download' | ReactElement;
/** Optional prop to specify whether the indicator is sized small or not. */
isSmall?: boolean;
/** Optional ID to add to the indicator container for testing purposes. */
testid?: string;
/** Optional children to display inside the indicator. */
children?: ReactNode;
};
/**
* PromoCardIndicator component.
*
* A PromoCardIndicator is a small component that can be used to display
* additional information or actions related to a PromoCard. It can be
* customized with various props to suit different use cases.
*
* @param {string} className - Optional class name(s) to add to the indicator container.
* @param {string} label - Optional label to display next to the indicator.
* @param {string | ReactElement} icon - Optional icon to display in the indicator.
* @param {string} testid - Optional ID to add to the indicator container for testing purposes.
* @param {ReactNode} children - Optional children to display inside the indicator.
* @returns {React.JSX.Element} - The PromoCardIndicator component.
* @example
*
*/
const PromoCardIndicator: React.FC = ({
className,
children,
label,
icon,
isSmall = false,
testid,
...rest
}) => {
const isIconString = icon && typeof icon === 'string';
const IconComponent =
isIconString &&
{
check: Check,
arrow: ArrowRight,
download: Download,
}[icon];
return (