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

import { isMobileDevice } from 'config/userAgent'

import { T9n } from 'features/T9n'

export const Switch = styled.div`
  display: flex;
  align-items: center;
  cursor: pointer;
  ${isMobileDevice
    ? css`
      justify-content: flex-end;
      width: 100%;
      /* height: 100%; */
      text-transform: uppercase;
    `
    : ''};
`

export const Title = styled(T9n)`
  font-weight: 600;
  font-size: 0.71rem;
  line-height: 1.14rem;
  text-transform: uppercase;
  margin-right: 0.614rem;
  color: ${({ theme }) => theme.colors.text100};
  ${isMobileDevice
    ? css`
      font-size: 10px;
      line-height: 22px;
      letter-spacing: 0.15rem;
      text-transform: uppercase;
      font-weight: 700;
    `
    : ''};
`

type IconProps = {
  height?: number,
  iconName: string,
  isOn: boolean,
  width?: number,
}

export const Icon = styled.div<IconProps>`
  width: ${({ width = 1.7 }) => width}rem;
  height: ${({ height = 2.28 }) => height}rem;
  position: relative;
  color: white;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  ${({ iconName, isOn }) => (
    isOn
      ? `
        background-image: url(/images/${iconName}-on.svg);
      `
      : `
        background-image: url(/images/${iconName}-off.svg);
      `
  )};

    ${isMobileDevice
    ? css`
        width: 36px;
        height: 22px;
        background-size: cover;
        margin-left: 1.5rem;
    `
    : ''}
    `

export const Wrapper = styled.div`
  margin-right: 2.45rem;
  display: flex;
  align-items: center;


  ${isMobileDevice
    ? css`
    @media screen and (orientation: portrait) {
      /* width: 30%; */
      height: 50px;
      /* top: 130px; */
      /* position: absolute; */
     /* right: -10px;
     width: 95vw;
     bottom: -90px; */
    }
    @media screen and (orientation: landscape) {
      display: none
    }
    `
    : ''};
`