'use client'

import ScrollToTopbtn from '@/components/scrollToTopbtn'
import Accordionn from '@/components/ui/Accordionn'
import OtherUrlAccording from '@/components/ui/OtherUrlAccording'

// import YoutubeIcon from '@/assets/youtubeIcon.svg'

import Podcasts from '@/components/ExpertPage/podcasts'
import SocialMedia from '@/components/ExpertPage/socialMedia'

import { sessionType } from '@/types/userType'
import { User } from 'lucia'
import CardSection from '../CardSection'
import UserInfo from '../UserInfo'
import Educations from '../education'
import Experiences from '../experiences'

interface UserInterface {
  session: sessionType
  user: User
  videos: any
}

const UserContent = ({ session, user }: UserInterface) => {

  return (
    <>
      <div className="w-[100%] sm:w-full flex flex-col mt-8 mb-16 ">
        <ScrollToTopbtn />
        <UserInfo expertInfoData={user} session={session} />

        <div className="flex flex-col w-11/12 md:w-3/4 max-w-full 3xl:max-w-[60%] justify-center items-center m-auto flex-shrink-0 rounded-[20px] md:px-6 bg-[#DFECF4] mt-12 py-6 mx-auto md:py-6">
          {user?.experiences && (
            <Experiences experiences={user.experiences} />
          )}

          {user?.educations && (
            <Educations education={user?.educations} />
          )}

            { user?.experiences && (
              <div className="block w-[94%] mx-auto  md:hidden">
                <Accordionn desc={user} title="Experience" />
              </div>
            )} 
          
          {/*  Education accordion  */}

          {user?.educations && (
            <div className="block w-[94%] mx-auto  md:hidden">
              <Accordionn desc={user} title="Education" />
            </div>
          )}

          {/*  Experts accordion  */}

          {user?.websiteURL1 && (
            <div className="w-4/5 mx-auto block md:hidden">
              <OtherUrlAccording
                url1={user?.websiteURL1}
                url2={user?.websiteURL2}
              />
            </div>
          )}

          <SocialMedia user={user} />

          {user?.podcasts && <Podcasts />}

          {user?.websiteURL1 && (
            <div className="bg-white p-4 rounded-lg w-[96%] mx-auto hidden md:block">
              <h4 className="font-semibold text-lg">Other Websites</h4>
              <hr className="my-4" />
              <div className="flex flex-col">
                <a
                  className="text-blue-500 hover:underline"
                  href={user.websiteURL1}
                >
                  {user.websiteURL1}
                </a>
                <a
                  className="text-blue-500 hover:underline"
                  href={user.websiteURL2}
                >
                  {user?.websiteURL2}
                </a>
              </div>
            </div>
          )}

          {/* --------- Accordion (mobile part ) -------------------------------*/}

          {/*  Expertise accordion  */}

          {/* expert card */}
          <CardSection
            session={session}
            userData={user}
            user="expert"
          />
        </div>
      </div>
      {/* <div className="mt-8  mb-8  py-8 pr-8">
        <MobileApp />
      </div> */}
    </>
  )
}

export default UserContent;