import { ChevronLeft } from '@transferwise/icons';
import { clsx } from 'clsx';
import { motion } from 'framer-motion';

interface Props {
  shouldShow: boolean;
}

export const Chevron = ({ shouldShow = true }: Props) => {
  return (
    <div
      className={clsx(
        'd-flex align-items-center',
        'wds-chevron-container',
        !shouldShow && 'wds-chevron-hidden',
      )}
    >
      <motion.div
        animate={{
          x: [12, 0, 0, -12],
          opacity: [0, 1, 1, 0],
        }}
        transition={{
          duration: 3,
          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],
          times: [0, 0.1, 0.9, 1],
          repeat: Infinity,
          repeatType: 'loop',
        }}
      >
        <ChevronLeft />
      </motion.div>
    </div>
  );
};