import { useCompareState } from "@/states";
import ThemeOptionContext from "@/context/themeOptionsContext";
import Link from "next/link";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";

const StickyCompare = () => {
  // Use compareList directly from Zustand for immediate count updates
  const { compareList } = useCompareState();
  const { cartCanvas } = useContext(ThemeOptionContext);
  const { t } = useTranslation("common");

  // Hide when cart sidebar is open to prevent overlap
  if (cartCanvas) return null;

  return (
    <div className="compare-fix">
      <Link href="/compare">
        <h5>
          {t("Compare")} <span>{`(${compareList?.length || 0})`}</span>
        </h5>
      </Link>
    </div>
  );
};

export default StickyCompare;