import Image from "next/image";
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 (
    // Below lg (1024px): badges sit side by side as one row (never wrap,
    // never stack to one-per-row) with icon ABOVE text, centered — icon
    // beside text (the lg: layout below) is what made a full row of 3
    // badges too wide below ~1024px in the first place (see git history:
    // originally lg:-gated for exactly this, then briefly tried flex-wrap,
    // which put an odd 3rd item alone on its own wrapped line and read as
    // disorganized). Putting the icon above the text instead shrinks each
    // badge down to just its text column's width, and — combined with
    // dropping whitespace-nowrap on the title/description below lg: so
    // long copy wraps within its own narrow column instead of forcing
    // overflow — a real row of 3 now fits without wrapping at all, so
    // there's no odd-item-out case to worry about. lg:+ reverts to the
    // original icon-beside-text row-with-dividers layout unchanged.
    <div className="w-full bg-bg-base flex justify-center py-8 px-[var(--layout-padding-x)]">
      <div className="flex flex-row justify-center gap-6 lg:gap-12 items-start lg:items-center w-full lg:w-auto">
        {items.map((item, i) => (
          <div key={item.id} className="flex flex-1 lg:flex-none items-center gap-6 lg:gap-12 min-w-0">
            {i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
            <div className="flex flex-col items-center text-center gap-2 w-full min-w-0 lg:flex-row lg:items-center lg:text-left lg:gap-4 lg:w-auto">
              <div className="relative size-8 shrink-0">
                <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
              </div>
              <div className="flex flex-col gap-0.5 items-center min-w-0 lg:items-start">
                <p className="font-semibold text-body text-text-primary lg:whitespace-nowrap">{item.title}</p>
                <p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
