import React, { FunctionComponent } from 'react'
import { css } from '@emotion/core';

import { MenuIconProps } from './menu-icon.types'

import Icon from 'components/icon';

import { ICON_NAMES } from 'utils/constants/assets'

import * as Styles from './menu-icon.styles'

const MenuIcon: FunctionComponent<MenuIconProps> = (props): JSX.Element => {
  const {
    menuFillColour,
    crossStrokeColour,
    onClick,
    isMenuVisible
  } = props

  const iconCss = css`
    svg {
      width: 100%;
      stroke: ${isMenuVisible ? crossStrokeColour : ''};
      fill: ${isMenuVisible ? '' : menuFillColour};
    }
  `

  return (
    <Styles.MenuIcon onClick={onClick}>
      <Icon iconName={isMenuVisible ? ICON_NAMES.CROSS : ICON_NAMES.MENU} styles={iconCss} />
    </Styles.MenuIcon>
  )
}

export default MenuIcon