import { getTrustBadges } from "../lib/payload";

// Content now lives in Payload (TrustBadges collection) instead of being
// hardcoded here, so copy (e.g. the shipping timeframe/threshold numbers)
// can be updated without a code deploy. If the fetch fails or nothing is
// seeded yet, the row just doesn't render rather than showing stale
// hardcoded fallback text that could drift from the real numbers.
export async function TrustRow() {
  const items = await getTrustBadges();
  if (items.length === 0) return null;

  return (
    <div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-center justify-center py-8 px-[var(--layout-padding-x)]">
      {items.map((item, i) => (
        <div key={item.id} className="flex items-center gap-6 md:gap-12">
          {i > 0 && <div className="hidden md:block h-10 w-px bg-border" />}
          <div className="flex gap-4 items-center">
            <img alt="" src={item.icon} className="size-8 shrink-0 object-contain" />
            <div className="flex flex-col gap-0.5 items-start">
              <p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
              <p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}