"use client";

import { BadgeCheck, Clock, CreditCard, Headphones, MapPin, Package, ShieldCheck, Truck, type LucideIcon } from "lucide-react";
import { IconeDoPix } from "./BoutiqueRodapeProprio";

/*
  A faixa de benefícios da Boutique, logo abaixo do banner da home. Sai da
  tarja de vantagens que a loja já cadastra (ícone, título e texto).

  Computador: até quatro colunas com divisória fina, ícone de traço, título
  em caixa alta bem espaçado e o texto em cinza.
  Celular: uma esteira contínua (os itens repetidos duas vezes andam meia
  volta e recomeçam), como na referência — nada fica cortado nem escondido.
*/

export type BoutiqueItemDaTarja = {
  icon?: string | null;
  title?: string | null;
  subtitle?: string | null;
};

const DESENHOS: Record<string, LucideIcon> = {
  truck: Truck,
  creditCard: CreditCard,
  shieldCheck: ShieldCheck,
  package: Package,
  clock: Clock,
  badgeCheck: BadgeCheck,
  mapPin: MapPin,
  headphones: Headphones,
};

function Icone({ nome, className }: { nome?: string | null; className?: string }) {
  if (nome === "pix") return <IconeDoPix className={className} />;
  const Desenho = DESENHOS[String(nome || "badgeCheck")] || BadgeCheck;
  return <Desenho className={className} strokeWidth={1.35} />;
}

export function BoutiqueTarja({ itens }: { itens: BoutiqueItemDaTarja[]; corDaMarca?: string }) {
  const lista = (itens || []).filter((item) => item && (item.title || item.subtitle)).slice(0, 4);
  if (!lista.length) return null;
  /* Meia esteira precisa ser mais larga que a tela (390 px): com um item só,
     ele entra duas vezes em cada metade. */
  const meiaVolta = Array.from({ length: Math.max(1, Math.ceil(2 / lista.length)) }).flatMap(() => lista);

  return (
    <section data-bq-beneficios="" className="w-full border-t bg-[var(--bq-surface)]" style={{ borderColor: "rgba(17,17,17,0.1)" }}>
      {/* Computador */}
      <div
        className="mx-auto hidden md:grid"
        style={{ width: "min(1440px, 100% - 56px)", gridTemplateColumns: `repeat(${lista.length}, minmax(0, 1fr))` }}
      >
        {lista.map((item, i) => (
          <div
            key={`${item.title}-${i}`}
            className="my-[22px] flex items-center justify-center gap-4 px-6"
            style={i > 0 ? { borderLeft: "1px solid var(--bq-linha-benef)" } : undefined}
          >
            <Icone nome={item.icon} className="h-6 w-6 shrink-0 text-[var(--bq-tinta)]" />
            <div className="min-w-0">
              {item.title ? (
                <p className="text-[14px] font-extrabold uppercase leading-[1.2] tracking-[0.11em] text-[var(--bq-tinta)]">{item.title}</p>
              ) : null}
              {item.subtitle ? (
                <p className="mt-1.5 text-[15px] leading-[1.4]" style={{ color: "var(--bq-benef)" }}>
                  {item.subtitle}
                </p>
              ) : null}
            </div>
          </div>
        ))}
      </div>

      {/* Celular: esteira */}
      <div className="overflow-hidden md:hidden" aria-label={lista.map((item) => item.title).filter(Boolean).join(" · ")}>
        <div className="bq-esteira">
          {[0, 1].map((volta) =>
            meiaVolta.map((item, i) => (
              <div
                key={`${volta}-${i}`}
                aria-hidden={volta === 1}
                className="my-[13px] flex w-[280px] shrink-0 items-center gap-3 px-5"
                style={{ borderLeft: "1px solid var(--bq-linha-benef)" }}
              >
                <Icone nome={item.icon} className="h-5 w-5 shrink-0 text-[var(--bq-tinta)]" />
                <div className="min-w-0">
                  {item.title ? (
                    <p className="truncate text-[9px] font-extrabold uppercase leading-[1.2] tracking-[0.11em] text-[var(--bq-tinta)]">{item.title}</p>
                  ) : null}
                  {item.subtitle ? (
                    <p className="mt-1 truncate text-[10px] leading-[1.4]" style={{ color: "var(--bq-benef)" }}>
                      {item.subtitle}
                    </p>
                  ) : null}
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </section>
  );
}