import styled from 'styled-components/macro'
import { keyframes } from 'styled-components'

const rotate = keyframes`
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
`

const Svg = styled.svg`
  width: 36px;
  height: 34px;
  animation: ${rotate} 1s linear infinite;
`

type ArrowsProps = {
  className?: string,
}

export const Arrows = ({ className }: ArrowsProps) => (
  <Svg className={className} viewBox='0 0 37 34' fill='none' xmlns='http://www.w3.org/2000/svg'>
    <path d='M24.7273 23.7334L28.0666 27.1107C22.5472 32.6929 13.509 32.6929 7.98953 27.1107C6.30609 25.4081 5.216 23.3706 4.56746 21.2214L2.22168 21.8913C2.99441 24.4033 4.31908 26.7897 6.30609 28.7993C12.8329 35.4003 23.1957 35.4003 29.7225 28.7993L33.0618 32.1765L36.0423 20.8027H35.6007L24.7273 23.7334Z' fill='currentColor' />
    <path d='M11.3977 10.2801L8.03084 6.90283C13.5779 1.3206 22.6575 1.3206 28.1907 6.90283C29.8604 8.5775 30.9505 10.6011 31.599 12.7223L33.9448 12.0385C33.1721 9.55439 31.8474 7.1959 29.8604 5.20025C23.306 -1.40073 12.888 -1.40073 6.3336 5.20025L2.99432 1.823L0 13.1968H0.441558L11.3977 10.2801Z' fill='currentColor' />
  </Svg>

)