"use client";

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

/**
 * O conteúdo leva o nome "page" e anima com page-out/page-in (globals.css) a cada troca de página.
 * key={pathname}: o template da raiz só remonta quando muda o primeiro segmento da rota (de /cases para
 * /cases/um-projeto ele continua o mesmo), e sem a chave a troca seria uma atualização no lugar, que
 * update="none" corta. Com a chave, a página que sai e a que entra formam o par que o React anima.
 * update="none": a hidratação e a revelação de Suspense também são transições do React e animariam a página
 * inteira na chegada (a tela piscava duas vezes); só a troca de página anima.
 *
 * Só no `next dev`, algumas rotas (/servicos/engenharia-de-software, /servicos/arquitetura-de-software e
 * /servicos/integracao-hardware-software-iot, às vezes o 404) mostram no console "Each child in a list should have a
 * unique key prop. Check the render method of OuterLayoutRouter". Não vem da `key` daqui nem do conteúdo da página
 * (uma página vazia também mostra): sem template.tsx o aviso some, e com qualquer template.tsx (testado com um
 * template de servidor e sem `key`) o servidor de desenvolvimento embrulha o template em
 * um nó do explorador de segmentos, e, quando o React o serializa como referência preguiçosa (`$L`) dentro da lista
 * [estilos, scripts, template] do TemplateContext, a conferência de keys o vê sem chave. O embrulho só existe com
 * `__NEXT_DEV_SERVER` e o aviso só existe no React de desenvolvimento: em produção não acontece.
 */
export default function Template({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  return (
    <ViewTransition key={pathname} name="page" update="none">
      {children}
    </ViewTransition>
  );
}