import defaultAvatar from "@/assets/default-avatar.png";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@radix-ui/react-tooltip';

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

  let imageLink;

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

  // }
  // else {
  //   imageLink = defaultAvatar.src;
  // }


  return (
    <>
      {/* first section */}
      <section className=" flex   w-11/12 md:w-3/4  max-w-full 3xl:max-w-[60%] justify-center  md:h-[507px] m-auto  flex-shrink-0 rounded-[20px] bg-[#0072B1]  ">
        <div className=" sm:w-11/12 w-[400px] flex flex-col-reverse md:flex-row justify-center md:justify-start py-0 pb-2 md:px-6 px-2  gap-8  items-center">
          <div className="w-full px-2  md:w-4/6 bg-expertBackground flex flex-col gap-4  md:gap-6  md:px-6 md:py-4  items-center md:items-start justify-start  text-white  rounded-xl ">
            <h1 className="text font-bold text-4xl font-inter leading-normal">
              {' '}
              {expertInfoData?.firstName + ' ' + expertInfoData?.lastName}{' '}
            </h1>

            <p className="text-base font-bold font-montserrat ">
              {' '}
              {expertInfoData?.role}{' '}
            </p>

            {/* {expertInfoData.skills.map((skill) => { */}

            {/* return ( */}
            <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 className="flex flex-wrap lg:flex-nowrap w-full items-center justify-start gap-2 text-yellow-400 ">
              <p className="flex py-2 px-3 gap-2 items-center justify-center rounded-[55px] bg-[#01517E] ">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="17"
                  viewBox="0 0 16 17"
                  fill="none"
                >
                  <mask
                    id="mask0_86_52"
                    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_86_52)">
                    <path
                      d="M10.7667 8.45858V3.93333H11.3333H11.4333V3.83333V2.5V2.4H11.3333H4.66667H4.56667V2.5V3.83333V3.93333H4.66667H5.23333V8.45858L3.92929 9.76262L3.9 9.79191V9.83333V11.1667V11.2667H4H7.23333V15.1667V15.2081L7.26262 15.2374L7.92929 15.904L8 15.9748L8.07071 15.904L8.73738 15.2374L8.76667 15.2081V15.1667V11.2667H12H12.1V11.1667V9.83333V9.79191L12.0707 9.76262L10.7667 8.45858ZM9.23333 9.06667V9.10809L9.26262 9.13738L9.85858 9.73333H6.14142L6.73738 9.13738L6.76667 9.10809V9.06667V3.93333H9.23333V9.06667Z"
                      fill="#FFB703"
                      stroke="#FFB703"
                      strokeWidth="0.2"
                    />
                  </g>
                </svg>

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

              <p className="flex py-2 px-3 gap-2 items-center justify-center rounded-[55px] bg-[#01517E] ">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="17"
                  viewBox="0 0 16 17"
                  fill="none"
                >
                  <mask
                    id="mask0_74_514"
                    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_74_514)">
                    <path
                      d="M7.99992 15.1666C7.08881 15.1666 6.2277 14.9916 5.41658 14.6416C4.60547 14.2916 3.89714 13.8138 3.29159 13.2083C2.68603 12.6027 2.20825 11.8944 1.85825 11.0833C1.50825 10.2721 1.33325 9.41103 1.33325 8.49992C1.33325 7.5777 1.50825 6.71381 1.85825 5.90825C2.20825 5.1027 2.68603 4.39714 3.29159 3.79159C3.89714 3.18603 4.60547 2.70825 5.41658 2.35825C6.2277 2.00825 7.08881 1.83325 7.99992 1.83325C8.92214 1.83325 9.78603 2.00825 10.5916 2.35825C11.3971 2.70825 12.1027 3.18603 12.7083 3.79159C13.3138 4.39714 13.7916 5.1027 14.1416 5.90825C14.4916 6.71381 14.6666 7.5777 14.6666 8.49992C14.6666 9.41103 14.4916 10.2721 14.1416 11.0833C13.7916 11.8944 13.3138 12.6027 12.7083 13.2083C12.1027 13.8138 11.3971 14.2916 10.5916 14.6416C9.78603 14.9916 8.92214 15.1666 7.99992 15.1666ZM7.99992 13.7999C8.28881 13.3999 8.53881 12.9833 8.74992 12.5499C8.96103 12.1166 9.13325 11.6555 9.26659 11.1666H6.73325C6.86659 11.6555 7.03881 12.1166 7.24992 12.5499C7.46103 12.9833 7.71103 13.3999 7.99992 13.7999ZM6.26658 13.5333C6.06659 13.1666 5.89159 12.786 5.74159 12.3916C5.59159 11.9971 5.46659 11.5888 5.36659 11.1666H3.39992C3.72214 11.7221 4.12492 12.2055 4.60825 12.6166C5.09158 13.0277 5.64436 13.3333 6.26658 13.5333ZM9.73325 13.5333C10.3555 13.3333 10.9083 13.0277 11.3916 12.6166C11.8749 12.2055 12.2777 11.7221 12.5999 11.1666H10.6333C10.5333 11.5888 10.4083 11.9971 10.2583 12.3916C10.1083 12.786 9.93325 13.1666 9.73325 13.5333ZM2.83325 9.83325H5.09992C5.06659 9.61103 5.04158 9.39158 5.02492 9.17492C5.00825 8.95825 4.99992 8.73325 4.99992 8.49992C4.99992 8.26658 5.00825 8.04158 5.02492 7.82492C5.04158 7.60825 5.06659 7.38881 5.09992 7.16658H2.83325C2.7777 7.38881 2.73603 7.60825 2.70825 7.82492C2.68047 8.04158 2.66659 8.26658 2.66659 8.49992C2.66659 8.73325 2.68047 8.95825 2.70825 9.17492C2.73603 9.39158 2.7777 9.61103 2.83325 9.83325ZM6.43325 9.83325H9.56658C9.59992 9.61103 9.62492 9.39158 9.64159 9.17492C9.65825 8.95825 9.66658 8.73325 9.66658 8.49992C9.66658 8.26658 9.65825 8.04158 9.64159 7.82492C9.62492 7.60825 9.59992 7.38881 9.56658 7.16658H6.43325C6.39992 7.38881 6.37492 7.60825 6.35825 7.82492C6.34159 8.04158 6.33325 8.26658 6.33325 8.49992C6.33325 8.73325 6.34159 8.95825 6.35825 9.17492C6.37492 9.39158 6.39992 9.61103 6.43325 9.83325ZM10.8999 9.83325H13.1666C13.2221 9.61103 13.2638 9.39158 13.2916 9.17492C13.3194 8.95825 13.3333 8.73325 13.3333 8.49992C13.3333 8.26658 13.3194 8.04158 13.2916 7.82492C13.2638 7.60825 13.2221 7.38881 13.1666 7.16658H10.8999C10.9333 7.38881 10.9583 7.60825 10.9749 7.82492C10.9916 8.04158 10.9999 8.26658 10.9999 8.49992C10.9999 8.73325 10.9916 8.95825 10.9749 9.17492C10.9583 9.39158 10.9333 9.61103 10.8999 9.83325ZM10.6333 5.83325H12.5999C12.2777 5.2777 11.8749 4.79436 11.3916 4.38325C10.9083 3.97214 10.3555 3.66659 9.73325 3.46659C9.93325 3.83325 10.1083 4.21381 10.2583 4.60825C10.4083 5.0027 10.5333 5.41103 10.6333 5.83325ZM6.73325 5.83325H9.26659C9.13325 5.34436 8.96103 4.88325 8.74992 4.44992C8.53881 4.01659 8.28881 3.59992 7.99992 3.19992C7.71103 3.59992 7.46103 4.01659 7.24992 4.44992C7.03881 4.88325 6.86659 5.34436 6.73325 5.83325ZM3.39992 5.83325H5.36659C5.46659 5.41103 5.59159 5.0027 5.74159 4.60825C5.89159 4.21381 6.06659 3.83325 6.26658 3.46659C5.64436 3.66659 5.09158 3.97214 4.60825 4.38325C4.12492 4.79436 3.72214 5.2777 3.39992 5.83325Z"
                      fill="#FFB703"
                    />
                  </g>
                </svg>{' '}
                {expertInfoData?.languagesSpoken.map((language) => {
                  return (
                    <span className="font-montserrat text-sm leading-4 text-white ">
                      {language.name},
                    </span>
                  )
                })}{' '}
              </p>

              <p className="flex py-2 px-3 gap-2 items-center justify-center rounded-[55px] bg-[#01517E] ">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="17"
                  viewBox="0 0 16 17"
                  fill="none"
                >
                  <mask
                    id="mask0_74_519"
                    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_74_519)">
                    <path
                      d="M7.93528 15.2427L8.00008 15.2979L8.06489 15.2427C9.85765 13.7172 11.201 12.2967 12.0912 10.981C12.9813 9.6655 13.4334 8.43775 13.4334 7.29992C13.4334 5.60971 12.8886 4.25368 11.7929 3.24308C10.7029 2.23779 9.43723 1.73325 8.00008 1.73325C6.56293 1.73325 5.29729 2.23779 4.20729 3.24308C3.11152 4.25368 2.56675 5.60971 2.56675 7.29992C2.56675 8.43775 3.0189 9.6655 3.90892 10.981C4.79915 12.2967 6.14252 13.7172 7.93528 15.2427ZM8.00008 8.59992C8.39348 8.59992 8.73274 8.45868 9.01246 8.17896C9.29217 7.89925 9.43341 7.55998 9.43341 7.16658C9.43341 6.77319 9.29217 6.43392 9.01246 6.15421C8.73274 5.87449 8.39348 5.73325 8.00008 5.73325C7.60668 5.73325 7.26742 5.87449 6.9877 6.15421C6.70799 6.43392 6.56675 6.77319 6.56675 7.16658C6.56675 7.55998 6.70799 7.89925 6.9877 8.17896C7.26742 8.45868 7.60668 8.59992 8.00008 8.59992ZM10.9327 9.95406C10.2944 10.944 9.31798 12.0473 8.00008 13.264C6.68218 12.0473 5.70579 10.944 5.06746 9.95406C4.41717 8.94556 4.10008 8.06189 4.10008 7.29992C4.10008 6.11216 4.47778 5.14697 5.22913 4.39563C5.98202 3.64273 6.90356 3.26659 8.00008 3.26659C9.0966 3.26659 10.0181 3.64273 10.771 4.39563C11.5224 5.14697 11.9001 6.11216 11.9001 7.29992C11.9001 8.06189 11.583 8.94556 10.9327 9.95406Z"
                      fill="#FFB703"
                      stroke="#FFB703"
                      strokeWidth="0.2"
                    />
                  </g>
                </svg>

                <span className="font-montserrat text-sm leading-4 text-white ">
                  {' '}
                  {expertInfoData?.state +
                    ' ' +
                    expertInfoData?.countryOfResidence || expertInfoData?.city +
                    ' ' +
                    expertInfoData.countryOfResidence}
                </span>
              </p>
            </div>

            <p className="font-montserrat text-center md:text-left w-full  px-2 py-4 text-sm leading-6 break-words">
              {expertInfoData?.biography}
            </p>
          </div>

          <div
            className={`flex flex-col flex-1 mt-5 md:mt-2 w-11/12 ${expertInfoData?.isExpert == true ? 'md:h-4/5' : ' md:h-3/5 '
              }   p-8 justify-center items-center gap-0   py-12 pt-16 bg-white   rounded-3xl `}
          >
            <div className=" -mt-5 p-1  mb-1 flex justify-center w-[120px] h-[120px] lg:w-[150px] lg:h-[150px] flex-shrink-0 rounded-full  bg-[#0072B1] ">
              <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>
        </div>
      </section>
    </>
  )
}

export default UserInfo