"use client";

import { useRouter } from "next/navigation";

/**
 * A seta de voltar da trilha de migalhas.
 *
 * O pedido foi literal: "só o nome 'Centro de aprendizado' não deixa intuitivo
 * do que fazer" — e a seta tem que levar para **a rota real de onde a pessoa
 * veio**.
 *
 * Então ela trabalha em duas pernas:
 *
 *   1. Veio de dentro do próprio site? Volta no histórico. É o único caminho
 *      que respeita de verdade por onde a pessoa andou: quem abriu um artigo a
 *      partir da busca volta para a busca, e não para a lista do módulo.
 *   2. Caiu aqui direto — do Google, de um link no WhatsApp, de uma aba nova?
 *      Aí não existe "de onde veio", e voltar no histórico jogaria a pessoa
 *      para fora. Nesse caso ela vai para o pai na hierarquia, que é o destino
 *      que sempre faz sentido.
 *
 * A decisão é tomada no clique, e não na montagem, porque `document.referrer`
 * só existe no navegador e navegação do Next não recarrega a página.
 */
export default function Voltar({ destino, rotulo }: { destino: string; rotulo: string }) {
  const router = useRouter();

  const voltar = () => {
    const veioDeDentro = (() => {
      try {
        /* `history.length` maior que 1 não basta: uma aba nova já nasce com
           entrada própria. O que prova a origem é o referrer do mesmo site. */
        if (!document.referrer) return false;
        return new URL(document.referrer).origin === window.location.origin;
      } catch {
        return false;
      }
    })();

    if (veioDeDentro && window.history.length > 1) router.back();
    else router.push(destino);
  };

  return (
    <button type="button" className="hl-voltar" onClick={voltar} aria-label={`Voltar para ${rotulo}`} title={`Voltar para ${rotulo}`}>
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M19 12H5M11 18l-6-6 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );
}