import { Fragment } from 'react'
import { Link } from 'react-router-dom'

import { PAGES } from 'config'

import { Logo } from 'features/Logo'
import { Menu } from 'features/Menu'

import {
  HeaderMobileWrapper,
  HeaderIconsWrapper,
  IconFavWrapper,
} from 'features/HeaderMobile/styled'

import { Filters } from '../Filters'

export const MobileHeader = () => (
  <Fragment>
    <HeaderMobileWrapper>
      <Link to={PAGES.home}>
        <Logo width={52} height={12} />
      </Link>
      <HeaderIconsWrapper>
        <IconFavWrapper />
        <Menu />
      </HeaderIconsWrapper>
    </HeaderMobileWrapper>

    <Filters />
  </Fragment>
)