import { cn } from "@/lib/utils";
import type { FactItem } from "@/content/home";
import { PlaceholderText, visibleFacts } from "./Facts";

export interface FactsStripProps {
  items: readonly FactItem[];
  className?: string;
}

/**
 * Speaker facts: one full-width row of equal cells separated by 1 px
 * vertical hairlines. Each cell = DM Mono label (muted) + Jost value.
 * Wraps to 2 / 3 columns below 1024 px.
 */
export function FactsStrip({ items, className }: FactsStripProps) {
  const rows = visibleFacts(items);
  if (!rows.length) return null;
  return (
    <dl
      className={cn(
        "grid grid-cols-2 border-y border-line sm:grid-cols-3 lg:grid-cols-6",
        "[&>div]:border-l [&>div]:border-line [&>div:first-child]:border-l-0",
        "[&>div:nth-child(2n+1)]:max-sm:border-l-0 [&>div:nth-child(3n+1)]:sm:max-lg:border-l-0",
        className,
      )}
    >
      {rows.map((f) => (
        <div key={f.label} className="flex flex-col gap-2 px-5 py-6 lg:px-6 lg:py-7">
          <dt className="font-mono text-xs tracking-[0.06em] text-fg-muted">{f.label}</dt>
          <dd className="font-sans text-[1.0625rem] leading-snug text-fg">
            <PlaceholderText text={f.value} />
          </dd>
        </div>
      ))}
    </dl>
  );
}

export default FactsStrip;