// components/landing/TrustStrip.tsx
// A quiet row of trust signals. First-load legitimacy matters here because users
// arrive cold from an influencer link and are about to pay (ux.md 1.2, 6).
// Server-safe. Icons are decorative (aria-hidden); meaning lives in the text.

import * as React from "react";

interface TrustItem {
  label: string;
}

const DEFAULT_ITEMS: TrustItem[] = [
  { label: "Organizado por Teletón" },
  { label: "Pago seguro" },
  { label: "Sorteo supervisado" },
];

export interface TrustStripProps {
  items?: TrustItem[];
  className?: string;
  /** Centered (hero) or left-aligned (inline) layout. */
  align?: "center" | "left";
}

export function TrustStrip({
  items = DEFAULT_ITEMS,
  className = "",
  align = "center",
}: TrustStripProps) {
  const cls = [
    "flex flex-wrap items-center gap-x-md gap-y-2",
    align === "center" ? "justify-center" : "justify-start",
    className,
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <ul className={cls} aria-label="Garantías de confianza">
      {items.map((item, i) => (
        <li
          key={item.label}
          className="flex items-center gap-2 font-body text-caption text-muted"
        >
          {/* Decorative check mark; the meaning is carried by the text label. */}
          {i > 0 ? (
            <span aria-hidden="true" className="text-hairline">
              &middot;
            </span>
          ) : null}
          <span aria-hidden="true" className="text-steelblue">
            &#10003;
          </span>
          <span>{item.label}</span>
        </li>
      ))}
    </ul>
  );
}