import { MediaQuery } from 'features/MediaQuery'
import { UserFavorites } from 'features/UserFavorites'
import { MainWrapper } from 'features/MainWrapper'

import { MobileHeader } from './components/MobileHeader'
import { DesktopHeader } from './components/DesktopHeader'
import { Results } from './components/Results'
import { useExtendedSearchStore } from './store'

import { Main } from './styled'

export { ExtendedSearchStore } from './store'

export const ExtendedSearchPage = () => {
  const { searchItems } = useExtendedSearchStore()
  return (
    <MainWrapper>
      <MediaQuery minDevice='laptop'>
        <DesktopHeader />
        <UserFavorites />
      </MediaQuery>

      <MediaQuery maxDevice='tablet'>
        <MobileHeader />
      </MediaQuery>
      <Main>
        <Results results={searchItems} />
      </Main>
    </MainWrapper>
  )
}