Cart trust row

import { FlaskConical, Lock, RotateCcw, Truck, type LucideIcon } from "lucide-react"
import { cn } from "@/components/storekit/lib/cn"

/* Compact trust row for the cart, placed right under the checkout button.
   Four short facts and a guarantee line. Every claim is a prop so it can
   match the store's real policies. */

export type TrustPoint = { icon: "lock" | "returns" | "tested" | "shipping"; title: string; detail?: string }

const ICONS: Record<TrustPoint["icon"], LucideIcon> = { lock: Lock, returns: RotateCcw, tested: FlaskConical, shipping: Truck }

const DEFAULT_POINTS: TrustPoint[] = [
  { icon: "lock", title: "Encrypted checkout", detail: "256-bit TLS" },
  { icon: "returns", title: "30-day returns", detail: "Unopened items" },
  { icon: "tested", title: "Third-party tested", detail: "Lab results for every batch" },
  { icon: "shipping", title: "Ships in 1 day", detail: "Business days" },
]

export function CartTrust({
  points = DEFAULT_POINTS,
  guarantee = "Not feeling it after 30 days? Tell us and we refund you, even if the pouch is empty.",
  payments = ["Visa", "Mastercard", "Amex", "Apple Pay"],
  className,
}: {
  points?: TrustPoint[]
  guarantee?: string
  payments?: string[]
  className?: string
}) {
  return (
    <div data-sk-section="cart" data-sk-variant="cart-trust" className={cn("w-full", className)}>
      <ul className="grid grid-cols-2 gap-px overflow-hidden rounded-sk-card border border-sk-line bg-sk-line">
        {points.map((p) => {
          const Icon = ICONS[p.icon]
          return (
            <li key={p.title} className="flex items-start gap-2.5 bg-sk-card p-3">
              <Icon size={15} className="mt-0.5 shrink-0 text-sk-ink" />
              <div className="min-w-0">
                <p className="text-[13px] font-medium leading-tight text-sk-ink">{p.title}</p>
                {p.detail ? <p className="mt-0.5 text-xs text-sk-muted">{p.detail}</p> : null}
              </div>
            </li>
          )
        })}
      </ul>
      {guarantee ? <p className="mt-3 text-xs leading-[1.5] text-sk-muted">{guarantee}</p> : null}
      {payments.length ? (
        <ul className="mt-3 flex flex-wrap gap-1.5" aria-label="Accepted payment methods">
          {payments.map((m) => (
            <li key={m} className="rounded-sk-chip border border-sk-line px-2 py-0.5 font-sk-mono text-[11px] uppercase tracking-[0.08em] text-sk-muted">
              {m}
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  )
}