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 Link from 'next/link'
import CallNowBtn from '@/components/callNowBtn'
import HeartIcon from '@/components/landingPage/HeartIcon'

const SearchCardExpert = ({ session, expert, user, isFavoriteDefault }: any) => {

  return (
    <div className=" flex flex-col gap-4 md:gap-auto w-11/12 md:w-11/12 md:max-w-full m-auto  flex-shrink-0 rounded-[20px] md:px-12 bg-[#ffffff] mt-4 md:mt-12 pt-6 lg:py-6 md:py-12    ">
      <div className="flex flex-col md:flex-row md:justify-between">
        <div className=" flex flex-col md:flex-row gap-6 items-center">
          <div className="p-1 flex justify-center w-[120px] h-[120px] lg:w-[150px] lg:h-[150px] flex-shrink-0 rounded-full  bg-[#0072B1] ">
            <img
              src={`${process.env.NEXT_PUBLIC_WEBSITE_URL
                }/api/serveFiles?filename=${encodeURIComponent(
                  expert.imageName
                )}`}
              alt="profile pic"
              className="max-w-full max-h-full rounded-full object-cover w-40 "
            />
          </div>

          <div className="flex flex-col gap-2 items-center md:items-start">
            <div className="flex gap-x-2">
            <Link href={`/experts/${expert?.id}`}>
              <h1 className="font-bold text-2xl xl::text-3xl text-black">
                {' '}
                {expert?.firstName + ' ' + expert.lastName}{' '}
              </h1>
            </Link>
              {user && 
            <HeartIcon expert={expert} user={user} isFavoriteDefault={isFavoriteDefault} />
            }
            </div>
            <p className="text-base font-bold font-montserrat text-black">
              {' '}
              {expert?.role}{' '}
            </p>
            <p className="text-blue-400 font-montserrat text-[14px] px-5 lg:px-0 font-[500px] leading-6 md:text-start text-center">
              {expert?.expertises?.map((expertise, index) => (
                <span key={index}>
                  {expertise.field}
                  {index < expert.expertises.length - 1 && (
                    <span className="text-blue-100"> | </span>
                  )}
                </span>
              ))}
            </p>
            <p className="text-blue-400 font-montserrat text-[14px] font-[500px] leading-5 md:leading-4 text-center md:text-start "></p>
          </div>
        </div>
        <div className="hidden lg:flex flex-col w-1/2 lg:flex-row md:self-start self-center justify-end items-center gap-3 md:mt-3">
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <p
                  className={`text-blue-400 font-montserrat text-base font-bold leading-6 py-4 ${!session?.user && 'blur cursor-pointer'
                    }   `}
                >
                  {' '}
                  ${expert?.rate + ' / '}
                  <span className=" text-black font-montserrat font-normal text-md leading-3    ">
                    {' '}
                    <b>45</b> 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-6  xl:px-12 py-3 md:py-3 justify-center items-center gap-2 lg:gap-4 rounded-[55px] font-bold bg-[#0072B1] text-white text-sm  xl:text-lg ">
            <PhoneIcon className="text-white w-6 h-6" />
            Call Now
          </button> */}

          <CallNowBtn
            classNames="bg-blue-500 w-36 py-2"
            isUser={session?.user}
            expert={expert}
            search
          />
        </div>
      </div>
      <div className="visible flex flex-wrap lg:flex-nowrap w-fit items-center justify-center lg:ml-40 -mt-6 lg:-mt-10 gap-2 text-yellow-400">
        <p className="flex py-2 px-3 gap-2 items-center justify-center rounded-[55px] text-gray-300 ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
          >
            <mask
              id="mask0_92_110"
              style={{ maskType: 'alpha' }}
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="16"
              height="16"
            >
              <rect width="16" height="16" fill="#D9D9D9" />
            </mask>
            <g mask="url(#mask0_92_110)">
              <path
                d="M10.6667 8L12 9.33333V10.6667H8.66667V14.6667L8 15.3333L7.33333 14.6667V10.6667H4V9.33333L5.33333 8V3.33333H4.66667V2H11.3333V3.33333H10.6667V8ZM5.9 9.33333H10.1L9.33333 8.56667V3.33333H6.66667V8.56667L5.9 9.33333Z"
                fill="#999999"
              />
            </g>
          </svg>

          <span className="font-montserrat text-sm leading-4 text-gray-600 ">
            {' '}
            {expert?.city}{' '}
          </span>
        </p>

        <p className="flex py-2 px-3 gap-2 items-center justify-center rounded-[55px] text-gray-300 ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="17"
            viewBox="0 0 16 17"
            fill="none"
          >
            <mask
              id="mask0_50_167"
              style={{ maskType: 'alpha' }}
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="16"
              height="17"
            >
              <rect y="0.5" width="16" height="16" fill="#D9D9D9" />
            </mask>
            <g mask="url(#mask0_50_167)">
              <path
                d="M8.00004 15.1666C7.08893 15.1666 6.22782 14.9916 5.41671 14.6416C4.6056 14.2916 3.89726 13.8138 3.29171 13.2083C2.68615 12.6027 2.20837 11.8944 1.85837 11.0833C1.50837 10.2721 1.33337 9.41103 1.33337 8.49992C1.33337 7.5777 1.50837 6.71381 1.85837 5.90825C2.20837 5.1027 2.68615 4.39714 3.29171 3.79159C3.89726 3.18603 4.6056 2.70825 5.41671 2.35825C6.22782 2.00825 7.08893 1.83325 8.00004 1.83325C8.92226 1.83325 9.78615 2.00825 10.5917 2.35825C11.3973 2.70825 12.1028 3.18603 12.7084 3.79159C13.3139 4.39714 13.7917 5.1027 14.1417 5.90825C14.4917 6.71381 14.6667 7.5777 14.6667 8.49992C14.6667 9.41103 14.4917 10.2721 14.1417 11.0833C13.7917 11.8944 13.3139 12.6027 12.7084 13.2083C12.1028 13.8138 11.3973 14.2916 10.5917 14.6416C9.78615 14.9916 8.92226 15.1666 8.00004 15.1666ZM8.00004 13.7999C8.28893 13.3999 8.53893 12.9833 8.75004 12.5499C8.96115 12.1166 9.13337 11.6555 9.26671 11.1666H6.73337C6.86671 11.6555 7.03893 12.1166 7.25004 12.5499C7.46115 12.9833 7.71115 13.3999 8.00004 13.7999ZM6.26671 13.5333C6.06671 13.1666 5.89171 12.786 5.74171 12.3916C5.59171 11.9971 5.46671 11.5888 5.36671 11.1666H3.40004C3.72226 11.7221 4.12504 12.2055 4.60837 12.6166C5.09171 13.0277 5.64448 13.3333 6.26671 13.5333ZM9.73337 13.5333C10.3556 13.3333 10.9084 13.0277 11.3917 12.6166C11.875 12.2055 12.2778 11.7221 12.6 11.1666H10.6334C10.5334 11.5888 10.4084 11.9971 10.2584 12.3916C10.1084 12.786 9.93337 13.1666 9.73337 13.5333ZM2.83337 9.83325H5.10004C5.06671 9.61103 5.04171 9.39158 5.02504 9.17492C5.00837 8.95825 5.00004 8.73325 5.00004 8.49992C5.00004 8.26658 5.00837 8.04158 5.02504 7.82492C5.04171 7.60825 5.06671 7.38881 5.10004 7.16658H2.83337C2.77782 7.38881 2.73615 7.60825 2.70837 7.82492C2.6806 8.04158 2.66671 8.26658 2.66671 8.49992C2.66671 8.73325 2.6806 8.95825 2.70837 9.17492C2.73615 9.39158 2.77782 9.61103 2.83337 9.83325ZM6.43337 9.83325H9.56671C9.60004 9.61103 9.62504 9.39158 9.64171 9.17492C9.65837 8.95825 9.66671 8.73325 9.66671 8.49992C9.66671 8.26658 9.65837 8.04158 9.64171 7.82492C9.62504 7.60825 9.60004 7.38881 9.56671 7.16658H6.43337C6.40004 7.38881 6.37504 7.60825 6.35837 7.82492C6.34171 8.04158 6.33337 8.26658 6.33337 8.49992C6.33337 8.73325 6.34171 8.95825 6.35837 9.17492C6.37504 9.39158 6.40004 9.61103 6.43337 9.83325ZM10.9 9.83325H13.1667C13.2223 9.61103 13.2639 9.39158 13.2917 9.17492C13.3195 8.95825 13.3334 8.73325 13.3334 8.49992C13.3334 8.26658 13.3195 8.04158 13.2917 7.82492C13.2639 7.60825 13.2223 7.38881 13.1667 7.16658H10.9C10.9334 7.38881 10.9584 7.60825 10.975 7.82492C10.9917 8.04158 11 8.26658 11 8.49992C11 8.73325 10.9917 8.95825 10.975 9.17492C10.9584 9.39158 10.9334 9.61103 10.9 9.83325ZM10.6334 5.83325H12.6C12.2778 5.2777 11.875 4.79436 11.3917 4.38325C10.9084 3.97214 10.3556 3.66659 9.73337 3.46659C9.93337 3.83325 10.1084 4.21381 10.2584 4.60825C10.4084 5.0027 10.5334 5.41103 10.6334 5.83325ZM6.73337 5.83325H9.26671C9.13337 5.34436 8.96115 4.88325 8.75004 4.44992C8.53893 4.01659 8.28893 3.59992 8.00004 3.19992C7.71115 3.59992 7.46115 4.01659 7.25004 4.44992C7.03893 4.88325 6.86671 5.34436 6.73337 5.83325ZM3.40004 5.83325H5.36671C5.46671 5.41103 5.59171 5.0027 5.74171 4.60825C5.89171 4.21381 6.06671 3.83325 6.26671 3.46659C5.64448 3.66659 5.09171 3.97214 4.60837 4.38325C4.12504 4.79436 3.72226 5.2777 3.40004 5.83325Z"
                fill="#999999"
              />
            </g>
          </svg>
          {expert?.languagesSpoken.map((language, index) => {
            const isLast = index === expert.languagesSpoken.length - 1
            return (
              <span
                className="font-montserrat text-sm leading-4 text-gray-600"
                key={index}
              >
                {language.name}
                {!isLast && ','}
              </span>
            )
          })}
        </p>

        <p className="flex py-2 px-3 gap-2 items-center justify-center rounded-[55px] text-gray-300 ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="17"
            viewBox="0 0 16 17"
            fill="none"
          >
            <mask
              id="mask0_50_172"
              style={{ maskType: 'alpha' }}
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="16"
              height="17"
            >
              <rect y="0.5" width="16" height="16" fill="#D9D9D9" />
            </mask>
            <g mask="url(#mask0_50_172)">
              <path
                d="M7.99996 8.49992C8.36663 8.49992 8.68052 8.36936 8.94163 8.10825C9.20274 7.84714 9.33329 7.53325 9.33329 7.16658C9.33329 6.79992 9.20274 6.48603 8.94163 6.22492C8.68052 5.96381 8.36663 5.83325 7.99996 5.83325C7.63329 5.83325 7.3194 5.96381 7.05829 6.22492C6.79718 6.48603 6.66663 6.79992 6.66663 7.16658C6.66663 7.53325 6.79718 7.84714 7.05829 8.10825C7.3194 8.36936 7.63329 8.49992 7.99996 8.49992ZM7.99996 13.3999C9.35552 12.1555 10.3611 11.0249 11.0166 10.0083C11.6722 8.99158 12 8.08881 12 7.29992C12 6.08881 11.6138 5.09714 10.8416 4.32492C10.0694 3.5527 9.12218 3.16659 7.99996 3.16659C6.87774 3.16659 5.93051 3.5527 5.15829 4.32492C4.38607 5.09714 3.99996 6.08881 3.99996 7.29992C3.99996 8.08881 4.32774 8.99158 4.98329 10.0083C5.63885 11.0249 6.6444 12.1555 7.99996 13.3999ZM7.99996 15.1666C6.21107 13.6444 4.87496 12.2305 3.99163 10.9249C3.10829 9.61936 2.66663 8.41103 2.66663 7.29992C2.66663 5.63325 3.20274 4.30547 4.27496 3.31659C5.34718 2.3277 6.58885 1.83325 7.99996 1.83325C9.41107 1.83325 10.6527 2.3277 11.725 3.31659C12.7972 4.30547 13.3333 5.63325 13.3333 7.29992C13.3333 8.41103 12.8916 9.61936 12.0083 10.9249C11.125 12.2305 9.78885 13.6444 7.99996 15.1666Z"
                fill="#999999"
              />
            </g>
          </svg>

          <span className="font-montserrat text-sm leading-4 text-gray-600 ">
            {' '}
            {expert?.state + ' ' + expert.countryOfResidence ||
              expert?.city + ' ' + expert.countryOfResidence}{' '}
          </span>
        </p>
      </div>
      <div className="lg:hidden flex w-full items-center justify-evenly">
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <p
                className={`text-blue-400 font-montserrat text-sm font-bold leading-6 py-4 ${!session?.user && 'blur cursor-pointer'
                  }   `}
              >
                {' '}
                ${expert?.rate + ' / '}
                <span className=" text-black font-montserrat font-normal text-md leading-3    ">
                  {' '}
                  <b>45</b> 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-6  xl:px-12 py-3 md:py-3 justify-center items-center gap-2 lg:gap-4 rounded-[55px] font-bold bg-[#0072B1] text-white text-sm  xl:text-lg ">
            <PhoneIcon className="text-white w-6 h-6" />
            Call Now
          </button> */}

        <CallNowBtn
          classNames="bg-blue-500 w-32 lg:w-36 py-1 lg:py-2 text-sm"
          isUser={session?.user}
          expert={expert}
          search
        />
      </div>
      <div>
        <p className="hidden lg:block text-center md:text-start break-words text-sm text-gray-500">
          {expert.biography}
        </p>
      </div>
    </div>
  )
}

export default SearchCardExpert