import defaultAvatar from "@/assets/default-avatar.png"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import CallNowBtn from '../callNowBtn'
import HeartIcon from "../landingPage/HeartIcon";

const ExpertCardSection = ({ session, user, expertInfoData }: any) => {

  let imageLink;

  if (expertInfoData?.imageName) {
    imageLink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/api/serveFiles?filename=${encodeURIComponent(expertInfoData.imageName)}`
  }
  else {
    imageLink = defaultAvatar.src;
  }


  console.log(user , "uesr");

  return (
    <section
      className={` ${expertInfoData?.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">
              {' '}
              {expertInfoData?.firstName + ' ' + expertInfoData?.lastName}{' '}
              {/* <HeartIcon expert={expert} user={user} isFavoriteDefault={isFavoriteDefault} /> */}
            </h1>
            <p className="text-base font-bold font-montserrat text-gray-100">
              {' '}
              {expertInfoData?.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">
              {expertInfoData?.expertises?.map((expertise, index) => (
                <span key={index}>
                  {expertise.field}
                  {index < expertInfoData.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">
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <p
                  className={`text-white font-montserrat text-lg font-bold  leading-6 py-2 ${!session?.user && 'blur cursor-pointer'
                    }   `}
                >
                  {' '}
                  ${expertInfoData?.rate ?? " - " + '  / 45 '}
                  <span className=" text-gray-200 font-montserrat font-normal text-md leading-3    ">
                    {' '}
                    Min Call{' '}
                  </span>
                </p>
              </TooltipTrigger>

              {!session?.user && (
                <TooltipContent>
                  <p className="bg-sky-300 text-black py-2 px-4 rounded-xl font-semibold ">
                    Signup to see the rates
                  </p>
                </TooltipContent>
              )}
            </Tooltip>
          </TooltipProvider>

          {/* <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> */}

          <CallNowBtn
            classNames="flex px-14 py-3 md:py-4 justify-center items-center gap-4 rounded-[55px] font-bold bg-[#FFB703] text-lg "
            isUser={session?.user}
            expert={expertInfoData}
          />
        </div>

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

export default ExpertCardSection