"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { BoutiqueSecoesDaHome, type BoutiqueSecaoDaHome } from "./BoutiqueSecoesDaHome";
import type { BoutiqueProduto } from "./BoutiqueCardDoProduto";
import type { BoutiqueCategoria } from "./BoutiqueShell";

/*
  Uma página extra da loja na Boutique (/<slug>/pagina/<pagina>): a trilha
  centralizada como na categoria da referência ("Início > Título", 12 px
  cinza), o título "de revista" em Georgia e as seções da página com o mesmo
  desenho das seções da home (BoutiqueSecoesDaHome).
*/

export function BoutiquePaginaExtra({
  slug,
  titulo,
  mostrarTitulo,
  secoes,
  produtos,
  categorias,
  clienteId,
  favoritos,
  corDaMarca,
  nomeDaLoja,
  envolverSecao,
  depois,
}: {
  slug: string;
  titulo: string;
  mostrarTitulo: boolean;
  secoes: BoutiqueSecaoDaHome[];
  produtos: BoutiqueProduto[];
  categorias: BoutiqueCategoria[];
  clienteId?: string | null;
  favoritos?: string[] | null;
  corDaMarca?: string;
  nomeDaLoja?: string | null;
  envolverSecao?: (secao: BoutiqueSecaoDaHome, indice: number, conteudo: ReactNode) => ReactNode;
  depois?: ReactNode;
}) {
  return (
    <div className="pb-6">
      {mostrarTitulo ? (
        <section className="w-full border-b px-4 pb-10 pt-6 text-center md:pb-14 md:pt-8" style={{ borderColor: "var(--bq-linha)" }}>
          <nav aria-label="Você está em" className="flex items-center justify-center gap-1.5 text-[12px] text-[#666666]">
            <Link href={`/${slug}`} className="transition-colors hover:text-[var(--bq-tinta)]">
              Início
            </Link>
            <span aria-hidden="true">&gt;</span>
            <span className="truncate">{titulo}</span>
          </nav>
          <h1 className="bq-revista bq-titulo-editorial mt-6 text-[var(--bq-tinta)] md:mt-8">{titulo}</h1>
        </section>
      ) : null}
      <BoutiqueSecoesDaHome
        secoes={secoes}
        envolver={envolverSecao}
        contarCliques
        slug={slug}
        produtos={produtos}
        categorias={categorias}
        clienteId={clienteId}
        favoritos={favoritos}
        corDaMarca={corDaMarca}
        nomeDaLoja={nomeDaLoja}
      />
      {depois}
    </div>
  );
}