import { useEffect } from "react";
import { BookOpen } from "lucide-react";
import { Link, useLocation } from "@tanstack/react-router";
import type { BookDto } from "@/lib/public-data.functions";

/** Floating "Latest from Eva" pill linking to the books page. */
export function FloatingPill({ latest }: { latest?: BookDto | null }) {
  const location = useLocation();

  useEffect(() => {
    // reserve a little breathing room above page content on small screens
    document.body.style.scrollPaddingBottom = "4rem";
  }, []);

  if (location.pathname === "/admin") return null;

  return (
    <Link
      to="/books"
      className="fixed bottom-5 right-5 z-50 inline-flex max-w-[80vw] items-center gap-2 truncate rounded-full bg-gold px-5 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-jungle-deep shadow-lg transition-transform hover:scale-[1.03]"
    >
      <BookOpen className="h-4 w-4 shrink-0" />
      Latest from Eva{latest ? `: ${latest.title}` : ""}
    </Link>
  );
}