import styles from './styles.module.scss'

type ArrowProps = {
  schema?: 'base' | 'contrast'
  direction: 'left' | 'right'
  onClick?: () => void
}

export const Arrow = ({ direction, onClick, schema = 'base' }: ArrowProps) => {
  return (
    <svg
      width="21"
      height="56"
      viewBox="0 0 21 56"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ transform: `rotate(${direction === 'left' ? 0 : 180}deg)` }}
      stroke="currentColor"
      className={styles[schema]}
      onClick={onClick}
    >
      <path d="M19 1.53406L2.68974 27.0243C2.26927 27.6814 2.26927 28.5231 2.68974 29.1802L19 54.6704"
            strokeWidth="3" />
    </svg>
  )
}