DescriptionList

import type { ReactNode } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export interface DescriptionItem {
  term: string;
  description?: ReactNode;
}
export function DescriptionList({
  items,
  columns = 1,
  divided = false,
  className,
}: {
  items: DescriptionItem[];
  columns?: 1 | 2;
  divided?: boolean;
  className?: string;
}) {
  return (
    <dl
      className={cn(
        "grid gap-x-8",
        columns === 2 && "sm:grid-cols-2",
        className,
      )}
    >
      {items.map((item) => (
        <div
          key={item.term}
          className={cn(
            "space-y-1 py-3",
            divided && "border-b last:border-b-0",
          )}
        >
          <dt className="text-xs font-medium text-muted-foreground">
            {item.term}
          </dt>
          <dd className="text-sm text-foreground">
            {item.description ?? (
              <span className="text-muted-foreground">Not provided</span>
            )}
          </dd>
        </div>
      ))}
    </dl>
  );
}