import React from 'react'
import Image from 'next/image'
import { PhoneIcon } from '@heroicons/react/24/outline'
import Elipse from '@/assets/ExpertElipse.svg'
import {
  TooltipContent,
  Tooltip,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import defaultAvatar from "@/assets/default-avatar.png";

const CardSection = ({ session, userData, user }: any) => {

  let imageLink;

  if (userData?.imageName) {
    imageLink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/api/serveFiles?filename=${encodeURIComponent(userData.imageName)}`

  }
  else {
    imageLink = defaultAvatar.src;
  }

  console.log("userData");
  console.log("userData");
  console.log("userData");
  console.log(userData);
  
  return (
    <section
      className={` ${userData?.isExpert == false ? 'hidden' : 'md:flex'
        }   w-full items-start  justify-center md:justify-start m-auto  flex-shrink-0 rounded-[20px] px-6 bg-[#DFECF4] md:mt-0  py-6`}
    >
      <div className="flex flex-col w-full md:flex-row gap-4 md:gap-auto  md:w-full  md:max-w-full  m-auto  flex-shrink-0 rounded-[20px]  md:px-6 bg-[#0072B1] mt-4  md:mt-12 py-6 md:py-1  md:justify-between 3xl:justify-between ">
        <div className="flex flex-col md:flex-row gap-6 items-center">
          <div className="lg:flex justify-center items-center lg:w-60 lg:h-60">
            <picture>
              <source src={imageLink} type="" />
              <img
                src={defaultAvatar.src}
                alt="profile picture"
                className="max-w-full max-h-full rounded-full object-cover w-40 "
              />
            </picture>
          </div>

          <div className="flex flex-col gap-2 items-center md:items-start">
            <h1 className="font-bold text-3xl text-white">
              {' '}
              {userData?.firstName + ' ' + userData?.lastName}{' '}
            </h1>
            <p className="text-base font-bold font-montserrat text-gray-100">
              {' '}
              {userData?.role ?? "no role was provided"}{' '}
            </p>
            <p className="text-yellow-400 my-2 font-montserrat text-[14px] font-[500px] leading-6 md:text-start lg:text-center text-center">
              {userData?.expertises?.map((expertise, index) => (
                <span key={index}>
                  {expertise.field}
                  {index < userData.expertises.length - 1 && (
                    <span className="text-blue-100"> | </span>
                  )}
                </span>
              ))}
            </p>
          </div>
        </div>
        {/*  2nd */}

        {/* {user !== 'user' && */}
        <div className="flex flex-col items-center justify-center gap-1  md:mt-3">


          {/* <button className="flex  px-14 py-3 md:py-4 justify-center items-center gap-4 rounded-[55px] font-bold bg-[#FFB703] text-lg ">

                        <PhoneIcon className='text-black w-6 h-6' />
                        Call Now
                    </button> */}

        </div>

        {/* } */}
      </div>
    </section>
  )
}

export default CardSection