"use client";

import { ViewTransition } from "react";
import { usePathname } from "next/navigation";

/**
 * Wrapper qui force le déclenchement des enter/exit du `<ViewTransition>`
 * de React à chaque changement de route. Sans `key={pathname}`, React
 * réutilise la même instance et seul `update` se jouerait — pas l'effet
 * waouh qu'on veut.
 *
 * Les classes `mf-page-in` / `mf-page-out` sont posées par React sur
 * les pseudo-éléments view-transition correspondants. La CSS associée
 * vit dans `src/app/globals.css`.
 */
export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  return (
    <ViewTransition
      key={pathname}
      enter="mf-page-in"
      exit="mf-page-out"
    >
      <div className="mf-page-root">{children}</div>
    </ViewTransition>
  );
}