"use client"

import { useEffect, useState } from "react"

const HeartIconFavorite = ({
  className,
  expert,
  user
}: {
  className?: string
  expert: any
  user: any
}) => {

  const [isFavorite, setIsFavorite] = useState(true)

  const toggleFavorite = async () => {
    setIsFavorite(!isFavorite)
    const res = await fetch("/api/favorite/toggle", {
      method: "POST",
      body: JSON.stringify({
        userId: user.userId,
        expertId: expert.id
      })
    })
    const data = await res.json();
  }

  return (
    <button
      onClick={toggleFavorite}
      className={className + `${isFavorite ? "fill-yellow-500" : "fill-gray-400"}`}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="lucide lucide-heart-icon lucide-heart"
      >
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
      </svg>
    </button>
  )
}

export default HeartIconFavorite