import classNames from 'classnames';
import { type FunctionComponent } from 'react';

import ArrowDown from '@/icons/ArrowDown.svg';
import ArrowLeft from '@/icons/ArrowLeft.svg';
import ArrowRight from '@/icons/ArrowRight.svg';
import ArrowUp from '@/icons/ArrowUp.svg';

import { Key } from '../../Key';

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

interface Props {
  className?: string;
}

export const Arrows: FunctionComponent<Props> = ({ className }) => (
  <div className={classNames(styles.arrows, className)}>
    <Key className={classNames(styles.arrow, styles.left)}>
      <ArrowLeft aria-hidden="true" role="img" />
    </Key>
    <Key className={classNames(styles.arrow, styles.up)}>
      <ArrowUp aria-hidden="true" role="img" />
    </Key>
    <Key className={classNames(styles.arrow, styles.right)}>
      <ArrowRight aria-hidden="true" role="img" />
    </Key>
    <Key className={classNames(styles.arrow, styles.down)}>
      <ArrowDown aria-hidden="true" role="img" />
    </Key>
  </div>
);