import { Document as DocumentIcon } from '@transferwise/icons';

import { Typography } from '../../../common';
import Body from '../../../body';
import Button from '../../../button';
import Title from '../../../title';

export interface CompleteStepProps {
  csButtonText: string;
  csSuccessText: string;
  fileName: string;
  isComplete: boolean;
  isImage: boolean;
  uploadedImage?: string;
  onClear: React.MouseEventHandler<HTMLButtonElement>;
}

export default function CompleteStep({
  csButtonText,
  csSuccessText,
  fileName,
  isComplete,
  isImage,
  onClear,
  uploadedImage,
}: CompleteStepProps) {
  return (
    <div className="droppable-complete-card droppable-card" aria-hidden={!isComplete}>
      <div className="droppable-card-content">
        <div
          className="droppable-card-content d-flex flex-column align-items-center"
          aria-live="polite"
        >
          {isImage && uploadedImage ? (
            <img src={uploadedImage} alt="OK" className="thumbnail " />
          ) : (
            <DocumentIcon />
          )}

          {fileName && (
            <Body as="p" className="m-b-0">
              {fileName}
            </Body>
          )}
          {csSuccessText && (
            <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
              {csSuccessText}
            </Title>
          )}
        </div>
        {csButtonText && (
          <Button v2 className="m-t-1" onClick={onClear}>
            {csButtonText}
          </Button>
        )}
      </div>
    </div>
  );
}
