"use client";

import { useTranslations } from "next-intl";

import { useInView } from "@/hooks/useInView";
import { cn } from "@/lib/utils";

/** Visible fraction of the badge that triggers the fade. */
const IN_VIEW_RATIO = 0.4;

/** End-of-article flourish that fades from 40% to full opacity once scrolled in. */
export default function ExploredBadge() {
  const t = useTranslations("BlogPage.article.explored");
  const [ref, visible] = useInView<HTMLDivElement>({ threshold: IN_VIEW_RATIO, once: true });

  return (
    <div
      ref={ref}
      className={cn(
        // #e0d3b8 / #faf6ec = nuances "or clair" de la maquette (aucun token dédié).
        "mt-6 border border-[#e0d3b8] bg-[#faf6ec] p-8 text-center transition-opacity duration-700 motion-safe:opacity-40",
        visible && "motion-safe:opacity-100",
      )}
    >
      <div aria-hidden="true" className="font-display text-[34px] leading-none text-gold">
        ✦
      </div>
      <p className="mt-3 font-display text-[19px] text-foreground">{t("title")}</p>
      <p className="mt-2 text-[13px] leading-[1.6] text-on-surface-variant">{t("body")}</p>
    </div>
  );
}