import { useState, useEffect } from ‘react’;
import { Sidebar } from “../../../layout/Sidebar”
import MainContent from “./MainContent”
import SideContent from “./SideContent”
import { IconBriefcase2, IconFlag, IconSchool, IconUser } from ‘@tabler/icons-react’;

const ProfilePage = () => {
const [screenWidth, setScreenWidth] = useState(window.innerWidth);

useEffect(() => {
    const handleResize = () => {
        setScreenWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
        window.removeEventListener('resize', handleResize);
    };
}, []);

const links = [
    { link: '#education', label: 'Education', icon: IconSchool, id: "education" },
    { link: '#professional', label: 'Professional Education', icon: IconFlag, id: "professional" },
    { link: '#current', label: 'Current Work Profile', icon: IconBriefcase2, id: "current" },
    { link: '#preferences', label: 'Job Preferences', icon: IconUser, id: "preferences" },
]

return (
    <>
        {screenWidth > 768 ? (
            <>
                <Sidebar links={links} />
                <MainContent />
                <SideContent />
            </>
        ) : (
            <MainContent />
        )}
    </>
);

}

export default ProfilePage;