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
 * <PromoCardIndicator label="Download" icon="download" />
 */
const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
  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 (
    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>
      {label && (
        <Body as="span" type={Typography.BODY_LARGE_BOLD} className="np-Card-indicatorText">
          {label}
        </Body>
      )}
      {icon && (
        <AvatarView
          interactive
          size={isSmall ? 40 : 56}
          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}
          className="np-Card-indicatorIcon"
        >
          {IconComponent ? <IconComponent size={24} aria-hidden="true" /> : icon}
        </AvatarView>
      )}
      {children}
    </div>
  );
};

export default PromoCardIndicator;
