import React, { Suspense, memo } from 'react'
import type { FC, ReactNode } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { DiscoverWrapper } from './style'
import AppHeader from '@/components/appHeader'
import AppMenu from '@/components/appMenu'
import AppLoading from '@/components/appLoading'

interface IProps {
  children?: ReactNode
}

const Discover: FC<IProps> = memo(() => {
  return (
    <DiscoverWrapper>
      <AppHeader />

      <div className="flexX">
        <AppMenu />

        <Suspense fallback={<AppLoading />}>
          <Outlet />
        </Suspense>
      </div>
    </DiscoverWrapper>
  )
})

export default Discover