import React from 'react';
import Icon from 'components/icon';
import { css } from '@emotion/core';
import { colors, buttonConfig, buttonRoundedness } from 'utils/theme';
import { ICON_NAMES } from 'utils/constants/assets';

interface ArrowButtonProps {
  direction: 'left' | 'right';
  iconColour: string;
  onClick: () => void;
}

const ArrowButton = (props: ArrowButtonProps): JSX.Element => {
  const iconName: ICON_NAMES = props.direction === 'left' ? ICON_NAMES.ARROW_LEFT : ICON_NAMES.ARROW_RIGHT;
  return (
    <div
      onClick={props.onClick}
      css={css`
        display: inline-flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: ${colors[buttonConfig.idleTextColour] || colors.textLight};
        background: ${props.iconColour};
        border-radius: ${buttonRoundedness[buttonConfig.roundedness] || 0};
      `}
    >
      <Icon
        iconName={iconName}
        styles={css`
          display: flex;
          svg {
            fill: white;
            width: 25px;
            height: 20px
          }
        `}
      />
    </div>
  );
};

export default ArrowButton;