"use client";

import { toggleBookmark } from "@/actions/deck";
import { CardResponse } from "@/lib/types/cards";
import { BookMarkedIcon, BookmarkIcon } from "lucide-react";
import { useEffect, useState, useTransition } from "react";

export const BookmarkIconito: React.FC<{ card: CardResponse }> = ({ card }) => {
  const [notes, setNotes] = useState();
  const [isBookmarked, setBookmarked] = useState(false);
  useEffect(() => {
    setBookmarked(card.expression.isBookmarked);
  }, [card]);

  const [isPending, startTransition] = useTransition();
  const toggle = (e: React.MouseEvent) => {
    console.log("toggling on fe");
    e.stopPropagation();
    startTransition(async () => {
      const res = await toggleBookmark(
        2,
        card.expression.id,
        isBookmarked,
        notes,
      );
      if ("ok" in res) setBookmarked(true);
    });
  };

  return isBookmarked ? (
    <BookMarkedIcon
      onClick={toggle}
      className="absolute top-5 right-3 hover:bg-red"
    />
  ) : (
    <BookmarkIcon
      onClick={toggle}
      className="absolute top-5 right-3 hover:bg-red"
    />
  );
};