import LayoutWithNav from '@/components/layout/LayoutWithNav'
import ProfileLinks from '@/components/layout/ProfileLinks'
import { Button, Col, Row } from 'antd'
import { useUser } from 'context/UserContext'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { SyncLoader } from 'react-spinners'
import { getRouterTitle, getToken } from 'utilFuncs/utilFunctions'
import { UserOutlined } from '@ant-design/icons';
import styles from '../../styles/Home.module.css'
import StandardContainer from '@/components/layout/StandardContainer'
import Image from 'next/image'
import ImageWithFallback from '@/components/layout/ImageWithFallback'
import { useDistricts } from 'context/DistrictContext'
import { fetchDistricts } from 'apiCalls/apiEndpoints'
import { NextSeo } from 'next-seo'
import { withAuth } from 'auth/withAuth'

const Favorites: NextPage = ({districts} : any) => {
  const router = useRouter()

  //get the current user from the context
  const { user, setUser } = useUser()

  const {setDistricts} = useDistricts()
  setDistricts(districts)



  // if (isLoading) {
  //   return (
  //     <div className='center mt-10'>
  //       <SyncLoader color='green' size={5} />
  //     </div>
  //   )
  // }

  return (
    <LayoutWithNav page_title='Favorites' description='Favorites'>
         <NextSeo
        title={`Favorites | Ashantiweb.com`}
        description={`View all your favorite items on ashantiweb`}
      />
      <StandardContainer>
        <Row>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 24 }} lg={{ span: 6 }}>
            <ProfileLinks />
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 24 }} lg={{ span: 18 }}>
            <div className="profile-dashboard">
              <div className="profile-sidebar-title">
                <h4 className="title">{getRouterTitle(router)}</h4>
              </div>
              <div className="profile-dashboard-wrapper pt-50">
                Favorites are not active for your account yet 
              </div>
            </div>
          </Col>
        </Row>
      </StandardContainer>
    </LayoutWithNav>
  )
}

export default withAuth(Favorites)

export async function getServerSideProps({res, req}: any) {
 

  const districts = await fetchDistricts()

  return {
    props: {
      districts: districts.data,
    }, // will be passed to the page component as props
  }
}