import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'

type Props = {
  isExpanded: boolean,
  toggle: () => void,
}

const Wrapper = styled.div<{ isExpanded: boolean }>`
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: 12px 12px;
  background-image: url(/images/${({ isExpanded }) => (
    isExpanded
      ? 'arrowUp.svg'
      : 'arrowDown.svg'
  )});
  background-position: center;
  background-repeat: no-repeat;
  :hover {
    cursor: pointer;
  }

  ${isMobileDevice
    ? css`
      right: 11px;
    `
    : ''};
`

export const Arrow = ({ isExpanded, toggle }: Props) => (
  <Wrapper
    onClick={toggle}
    isExpanded={isExpanded}
  />
)
