"use client";

import { BadgeCheck, Clock, CreditCard, Headphones, MapPin, Package, ShieldCheck, Truck } from "lucide-react";
import CatalogInfoStripMobile from "@/components/CatalogInfoStripMobile";

/*
  A tarja de vantagens da loja: retirada, pagamento, prazo.

  Fica logo abaixo do banner, na página inicial. Antes do banner ela empurrava
  a vitrine para baixo e roubava a primeira olhada, que é da oferta.

  No celular vira um item por vez: três empilhados custam meia tela de altura
  e o texto de cada um sai cortado se ficam lado a lado.
*/

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

const DESENHOS: Record<
  string,
  React.ComponentType<{ size?: number; className?: string; style?: React.CSSProperties }>
> = {
  truck: Truck,
  creditCard: CreditCard,
  shieldCheck: ShieldCheck,
  package: Package,
  clock: Clock,
  badgeCheck: BadgeCheck,
  mapPin: MapPin,
  headphones: Headphones,
};

export function VendorTarja({ itens, corDaMarca }: { itens: VendorItemDaTarja[]; corDaMarca: string }) {
  const lista = (itens || []).filter((item) => item && (item.title || item.subtitle)).slice(0, 3);
  if (!lista.length) return null;

  return (
    <div className="mt-6 border-y bg-[var(--vd-surface)]" style={{ borderColor: "var(--vd-border)" }}>
      <div className="mx-auto hidden w-full max-w-6xl items-center justify-center gap-10 px-4 py-3 sm:flex">
        {lista.map((item, i) => {
          const Desenho = DESENHOS[String(item.icon || "badgeCheck")] || BadgeCheck;
          return (
            <div key={`${item.title}-${i}`} className="flex items-center gap-2">
              <span
                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
                style={{
                  backgroundColor: "color-mix(in srgb, var(--vd-primary) 12%, transparent)",
                  color: "var(--vd-primary)",
                }}
              >
                <Desenho size={16} />
              </span>
              <span className="min-w-0">
                <span className="block text-[12.5px] font-semibold">{item.title}</span>
                {item.subtitle ? (
                  <span className="block text-[11px] text-[var(--vd-muted-fg)]">{item.subtitle}</span>
                ) : null}
              </span>
            </div>
          );
        })}
      </div>

      <div className="sm:hidden">
        <CatalogInfoStripMobile
          items={lista.map((item) => ({
            title: String(item.title || ""),
            subtitle: String(item.subtitle || ""),
            Icon: DESENHOS[String(item.icon || "badgeCheck")] || BadgeCheck,
          }))}
          accentColor={corDaMarca}
          tintColor="color-mix(in srgb, var(--vd-primary) 12%, transparent)"
          borderColor="var(--vd-border)"
        />
      </div>
    </div>
  );
}