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

import { isMobileDevice } from 'config/userAgent'

import { BaseButton } from '../BaseButton'

type HeaderProps = {
  height?: number,
}

export const Header = styled.div<HeaderProps>`
  height: ${({ height = 35 }) => height}px;
  display: flex;
  ${isMobileDevice
    ? css`
      position: relative;
      width: 100%;
    `
    : ''};
`

type HeaderActionsProps = {
  position: 'left' | 'right',
}

export const HeaderActions = styled.div<HeaderActionsProps>`
  position: absolute;
  display: flex;
  top: 15px;

  ${({ position }) => css`
    ${position}: 15px;
  `}

  ${BaseButton}:not(:last-child) {
    margin-right: 20px;
  }

  ${isMobileDevice
    ? css`
      top: 40px;
      right: 40px;
      @media screen and (orientation: landscape){
        top: 20px;
        right: 50px;
      }
    `
    : ''};
`

export const HeaderTitle = styled.h2`
  position: absolute;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);

  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  color: #FFFFFF;
  text-align: center;
  ${isMobileDevice
    ? css`
      font-size: 16px;
      position: relative;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
    `
    : ''};
`
