import defaultAvatar from "@/assets/default-avatar.png";
import CallNowBtn from '@/components/callNowBtn';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@radix-ui/react-tooltip';
import { ArrowRight } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import HeartIcon from './HeartIcon';
import HeartIconFavorite from "./HeartIconFavorite";

type Props = {
  expert: any
  isUser: any
}

const ExpertCardFavorite = ({ expert , isUser}: any) => {


  console.log('expert', expert);
  console.log('isUser', isUser);

  
  return (
    <div className="h-[480px] lg:h-[500px]">
      <header className="relative">
        <div className="-mt-16 flex justify-center">
          <div className="relative max-w-max rounded-full border-4 border-primary bg-primary">
            <Image
              width={100}
              height={100}
              src={
                expert.User.imageName != ""
                  ? `${process.env.NEXT_PUBLIC_WEBSITE_URL
                  }/api/serveFiles?filename=${encodeURIComponent(
                    expert.User.imageName
                  )}`
                  : defaultAvatar
              }
              alt="User Image"
              className="rounded-full object-cover w-28  h-28"
            />
          </div>
        </div>
      </header>

      <div className="flex justify-center w-full pt-3 gap-x-2">
        <Link href={`/experts/${expert?.id}`}>
          <h1 className="text-xl font-bold font-inter">
            {(expert?.User.firstName + ' ' + expert?.User.lastName)?.substring(0, 22)}
          </h1>
        </Link>

        {/* Icon favorite */}
        <HeartIconFavorite  expert={expert} user={isUser} className="" />
      </div>

      <p>{expert?.User.role}</p>
      {/* <p className="text-blue-400 my-2 font-montserrat text-[14px] font-[500px] leading-6 md:text-start lg:text-center text-center">
        {expert?.expertises?.slice(0, 3).map((expertise, index) => (
          <span key={index}>
            {expertise.field}
            {index < expert.expertises.slice(0, 3).length - 1 && (
              <span className="text-blue-100"> | </span>
            )}
          </span>
        ))}
      </p> */}

      <div className="">
        <p className="break-words text-sm lg:text-base">
          {expert?.User.biography.slice(0, 200)}...{' '}
          <Link className="inline" href={`/experts/${expert?.id}`}>
            <ArrowRight className="inline" />
          </Link>
        </p>
      </div>
      <div className="flex items-center justify-around md:justify-evenly w-full absolute bottom-4">
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <p
                className={`text-[#0072B1] font-montserrat text-base cursor-pointer font-bold  leading-6 ${!true ? 'blur' : ''
                  }`}
              >
                {expert.User.rate}$
                <span className="text-[#2A3041] font-montserrat font-normal leading-6">
                  / 45 min
                </span>
              </p>
            </TooltipTrigger>

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

        <CallNowBtn
          classNames="px-3 py-1 lg:px-6 lg:py-2 lg:gap-2 border border-solid border-[#0072B1] bg-blue-100 "
          isUser={{}}
          expert={expert}
        />
      </div>
    </div>
  )
}

export default ExpertCardFavorite