import * as React from "react";
import { cn } from "../lib/utils";

/** Label/value pairs for a record's details. */
export function PropertyList({
  items,
  columns = 1,
  className,
}: {
  items: Array<{ label: React.ReactNode; value: React.ReactNode; hidden?: boolean }>;
  columns?: 1 | 2;
  className?: string;
}) {
  return (
    <dl className={cn("grid gap-x-8", columns === 2 ? "sm:grid-cols-2" : "grid-cols-1", className)}>
      {items
        .filter((item) => !item.hidden)
        .map((item, index) => (
          <div
            key={index}
            className="flex min-w-0 items-baseline justify-between gap-4 border-b border-border/50 py-2.5 last:border-b-0"
          >
            <dt className="shrink-0 text-sm text-muted-foreground">{item.label}</dt>
            <dd className="min-w-0 truncate text-right text-sm font-medium text-foreground">{item.value}</dd>
          </div>
        ))}
    </dl>
  );
}