import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
import { clsx } from 'clsx';

import Avatar, { AvatarType } from '../../avatar';

export interface BackButtonProps {
  'aria-label': string;
  className?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

export default function BackButton({
  className,
  onClick,
  'aria-label': ariaLabel,
}: BackButtonProps) {
  return (
    <Avatar type={AvatarType.ICON} size={40}>
      <button
        type="button"
        aria-label={ariaLabel}
        className={clsx('np-back-button', 'btn-unstyled', className)}
        onClick={onClick}
      >
        <ArrowLeftIcon size={24} />
      </button>
    </Avatar>
  );
}
