import LayoutWithNav from '@/components/layout/LayoutWithNav'
import { Button } 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 { getToken } from 'utilFuncs/utilFunctions'
import { Tabs } from 'antd';
import React from 'react';
import UserProfileImage from '@/components/layout/UserProfileImage'
import { NextSeo } from 'next-seo'
import { withAuth } from 'auth/withAuth'

const { TabPane } = Tabs;

const Profile: NextPage = () => {
    const router = useRouter();

    const [isLoading, setIsLoading] = useState(true);
    const { user, setUser } = useUser()


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

    const onChange = (key: string) => {
        console.log(key);
    };

    const viewAllAds = () => {
        router.push('/my-ads')
    }


    return (
        <LayoutWithNav page_title='profile' description='Profile'>
            <NextSeo
                title={`Profile - ${user?.name} | Ashantiweb.com`}
                description='Profile'
            />
            <section className='container mx-auto lg:px-40 mt-20'>
                <div className='w-full'>

                    <p>{user?.name}</p>
                </div>
                <Tabs defaultActiveKey="1" onChange={onChange}>
                    <TabPane tab="My Ads" key="1">
                        <Button onClick={viewAllAds} type="primary">View All Ads</Button>
                    </TabPane>
                    <TabPane tab="Contact" key="2">
                        <p className='text-gray-500'>Phone</p>
                        <p> {user?.phone}</p>
                        <p className='mt-3 text-gray-500'>Email</p>
                        <p>{user?.email}</p>
                    </TabPane>
                </Tabs>
            </section>
        </LayoutWithNav>
    )
}

export default withAuth(Profile)