import { AlertCircle, CheckCircle } from '@transferwise/icons';
import { clsx } from 'clsx';
import React from 'react';
import Body from '../body';
import { Typography } from '../common';

export interface TableStatusTextProps {
  text: string | React.ReactNode;
  className?: string;
  status?: 'success' | 'error';
  typography?: 'default' | 'default-bold';
}

const TableStatusText = ({
  text,
  className,
  status,
  typography = 'default',
}: TableStatusTextProps) => {
  const typographyType =
    (status ?? typography === 'default-bold')
      ? Typography.BODY_DEFAULT_BOLD
      : Typography.BODY_DEFAULT;

  return (
    <Body
      type={typographyType}
      className={clsx(className, {
        'np-table-content--success': status === 'success',
        'np-table-content--error': status === 'error',
      })}
    >
      {text}
      {status === 'success' && <CheckCircle className="tw-icon--status" data-testid="check-icon" />}
      {status === 'error' && <AlertCircle className="tw-icon--status" data-testid="alert-icon" />}
    </Body>
  );
};

export default TableStatusText;
