import { Heart, LoaderCircle } from "lucide-react";
import { useEffect } from "react";
import { useI18n } from "../i18n";
import { useFavorites } from "./FavoritesProvider";

type FavoriteButtonProps = {
  resourceId: string;
  className?: string;
  size?: "sm" | "md";
};

export function FavoriteButton({
  resourceId,
  className = "",
  size = "md",
}: FavoriteButtonProps) {
  const { t } = useI18n();
  const favorites = useFavorites();
  const status = favorites.statusFor(resourceId);
  const pending = favorites.pendingIds.has(resourceId);
  const isFavorite = status === "favorited";

  useEffect(() => {
    void favorites.ensureFavoriteIds([resourceId]).catch(() => undefined);
  }, [favorites, resourceId]);

  const dimension = size === "sm" ? "h-9 w-9" : "h-10 w-10";

  return (
    <button
      type="button"
      onClick={(event) => {
        event.preventDefault();
        event.stopPropagation();
        void favorites.toggleFavorite(resourceId).catch(() => undefined);
      }}
      disabled={pending}
      aria-pressed={isFavorite}
      aria-label={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
      title={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
      className={[
        "inline-flex shrink-0 items-center justify-center rounded-full border outline-none transition active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait disabled:opacity-70",
        dimension,
        isFavorite
          ? "border-ark-gold/60 bg-ark-gold text-black hover:bg-ark-gold2"
          : "border-white/10 bg-[#191921]/90 text-white hover:border-ark-gold/50 hover:bg-ark-gold/10 hover:text-ark-gold",
        className,
      ].join(" ")}
    >
      {pending ? (
        <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.2} />
      ) : (
        <Heart
          className="h-5 w-5"
          strokeWidth={2.2}
          fill={isFavorite ? "currentColor" : "none"}
        />
      )}
    </button>
  );
}