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: space-between;
      width: 100%;
    `
    : ''};
`

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: 14px;
      line-height: 22px;
      letter-spacing: -0.408px;
      text-transform: none;
      font-weight: 400;
    `
    : ''};
`

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: 51px;
        height: 31px;
    `
    : ''}
    `

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

  ${isMobileDevice
    ? css`
     position: absolute;
     bottom: -130px;
     right: -10px;
     width: 95vw;
        @media (max-width: 450px){
          bottom: -137px;
        }
    `
    : ''};
`
