import type { Metadata } from "next";
import type { ReactNode } from "react";
import LiveDaLoja from "@/components/live/LiveDaLoja";
import MarcaDentroDaLive from "@/components/live/MarcaDentroDaLive";
import SystemNoticesHost from "@/components/SystemNoticesHost";

/*
  Cada loja tem o seu manifesto.

  É o que permite instalar a loja na tela do celular — e, no iPhone, é o que
  libera o aviso de mensagem nova: lá o aviso só existe para site instalado. O
  manifesto é montado por slug, com o nome, a cor e o ícone daquela loja.

  (O título continua aqui porque Next não aceita `metadata` e
  `generateMetadata` no mesmo arquivo.)
*/
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  return {
    title: { default: "Loja", template: "%s" },
    manifest: `/${slug}/manifest.webmanifest`,
    appleWebApp: { capable: true, statusBarStyle: "default" },
  };
}

export default async function PublicCatalogLayout({ children, params }: { children: ReactNode; params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return (
    <>
      <SystemNoticesHost />
      <MarcaDentroDaLive />
      <div style={{ paddingTop: "var(--ktl-system-notices-offset, 0px)" }}>{children}</div>
      {/* Liveshop: a live no ar aparece nas páginas dos produtos e segue tocando enquanto a pessoa navega. */}
      <LiveDaLoja slug={slug} />
    </>
  );
}