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

import { isMobileDevice } from 'config'

import { ArrowButton, Arrow as ArrowBase } from 'features/HeaderFilters/components/DateFilter/styled'

type WrapperProps = {
  width?: number,
}

export const Wrapper = styled.div<WrapperProps>`
  width: ${({ width }) => (width ? `${width}px` : 'auto')};
  margin: auto;
`

export const List = styled.ul`
  display: flex;
  gap: 20px;

  ${isMobileDevice
    ? css`
        display: initial;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
      `
    : ''}
`

export const ListItem = styled.li`
  width: 260px;

  ${isMobileDevice
    ? css`
        width: 100%;
        margin-bottom: 12px;
        border-radius: 2px;
        overflow: hidden;
      `
    : ''}
`

const NavButton = styled(ArrowButton)`
  position: absolute;
  top: 50%;
  translate: 0 -50%;

  ${({ disabled }) => (disabled
    ? css`
        opacity: 0.5;
      `
    : '')}
`

export const PrevButton = styled(NavButton)`
  left: 30px;
`

export const NextButton = styled(NavButton)`
  right: 30px;
`

export const Arrow = styled(ArrowBase)`
  width: 20px;
  height: 20px;
`