"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { ChevronRight, Home } from "lucide-react";
import { VendorSecoesDaHome, type VendorSecaoDaHome } from "./VendorSecoesDaHome";
import type { VendorProduto } from "./VendorCardDoProduto";
import type { VendorCategoria } from "./VendorShell";

/*
  Uma página extra da loja no Vendor (/<slug>/pagina/<pagina>): a trilha e o
  título no desenho da página de categoria do Vendor, e as seções da página
  com o mesmo desenho das seções da home.
*/

export function VendorPaginaExtra({
  slug,
  titulo,
  mostrarTitulo,
  secoes,
  produtos,
  categorias,
  clienteId,
  favoritos,
  corDaMarca,
  envolverSecao,
  depois,
}: {
  slug: string;
  titulo: string;
  mostrarTitulo: boolean;
  secoes: VendorSecaoDaHome[];
  produtos: VendorProduto[];
  categorias: VendorCategoria[];
  clienteId?: string | null;
  favoritos?: string[] | null;
  corDaMarca?: string;
  envolverSecao?: (secao: VendorSecaoDaHome, indice: number, conteudo: ReactNode) => ReactNode;
  depois?: ReactNode;
}) {
  return (
    <div className="pb-6">
      {mostrarTitulo ? (
        <section className="mx-auto w-full max-w-6xl px-4 pt-6">
          <nav className="mb-4 flex items-center gap-1.5 text-xs text-[var(--vd-muted-fg)]">
            <Link href={`/${slug}`} className="flex items-center gap-1 transition-colors hover:text-[var(--vd-foreground)]">
              <Home className="h-3.5 w-3.5" />
              Início
            </Link>
            <ChevronRight className="h-3 w-3" />
            <span className="truncate font-medium text-[var(--vd-foreground)]">{titulo}</span>
          </nav>
          <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">{titulo}</h1>
        </section>
      ) : null}
      <VendorSecoesDaHome
        secoes={secoes}
        envolver={envolverSecao}
        contarCliques
        slug={slug}
        produtos={produtos}
        categorias={categorias}
        clienteId={clienteId}
        favoritos={favoritos}
        corDaMarca={corDaMarca}
      />
      {depois}
    </div>
  );
}