import { Heart } from "lucide-react";
import Image from "next/image";
import Cookies from "js-cookie";
import axiosClient from "../../../services/axiosClient";

// Images
import star from "./../../../public/star.png";
import { useState } from "react";
import { useFavorite } from "../../../hooks/useFavorite";
import Link from "next/link";

export default function TrustedAcrossCard({ item }) {
  // const token = Cookies?.get("sirius_token");

  const { isFavorite, toggleFavorite } = useFavorite(
    item?.id,
    item?.is_favorite,
    "Specialist",
  );

  return (
    <Link
      href={`/specialists/${item?.id}`}
      className="flex flex-col rounded-3xl lg:rounded-[30px] h-full overflow-hidden bg-[#FFFFFF]  shadow-md relative mx-0.5"
    >
      <div
        onClick={(e) => {
          e.preventDefault();
          toggleFavorite();
        }}
        className="z-10 flex items-center justify-center absolute top-4 right-4 size-10 rounded-full p-1 bg-[#b2b2b43d] backdrop-blur-md text-white cursor-pointer 
             transition-transform duration-75 active:scale-90 "
      >
        <Heart
          className={`size-5.5 transition-colors duration-300 ${isFavorite ? "text-red-500 fill-red-500" : ""}`}
        />
      </div>

      <div className="w-full aspect-[1/0.8] xl:aspect-[1/0.9] relative overflow-hidden">
        <Image
          src={item?.profile_picture || " "}
          alt="accors"
          className="object-cover"
          fill
        />
      </div>

      <div className="p-3 lg:p-5">
        <div className="flex items-center justify-between gap-3">
          <h2 className="text-[#101010] font-semibold  text-2xl xl:text-[2rem] 2xl:text-[2.25rem]">
            {item?.name}
          </h2>
          <div className="flex items-center gap-1">
            <Image
              src={star}
              alt="star"
              width={24}
              height={24}
              className="mb-1"
            />
            <p className="text-[#101010] font-medium text-base xl:text-[1.4rem]">
              {item?.rating}
            </p>
          </div>
        </div>
        <p className="text-sm md:text-base xl:text-lg font-medium text-[#939393]">
          {item?.services[0]?.name}
          {item?.services?.length > 1 && (
            <span className=" text-xs ml-2">
              ( {" +"} {item?.services?.length - 1})
            </span>
          )}
        </p>
      </div>
    </Link>
  );
}