import React from 'react'

import Button from './Button'

import { COLORS } from '../lib/constants'

import * as Arrows from './svg/Arrows'

const MenuButton = React.memo(({ name, select, selected, noArrows }) => {

return (

<div className="menu-button">

<Button

padding="8px"

onClick={select(name)}

background={selected === name ? COLORS.BLACK : COLORS.DARK_GRAY}

>

{name}

{!noArrows && (

<div className="arrow-icon">

<Arrows.Right />

</div>

)}

</Button>

<style jsx>

{`

.menu-button {

display: flex;

height: 33px;

border-bottom: 1px solid ${COLORS.SECONDARY};

position: relative;

align-items: center;

}

.menu-button:last-child {

${selected === 'Misc' ? 'border-bottom: none;' : ''};

}

.arrow-icon {

position: absolute;

right: 14px;

top: 11px;

}

`}

</style>

</div>

)

})

export default MenuButton