Artifacts

import { cn } from "@/lib/utils";

/** A labeled list of bullet points — used across executive and work-order detail. */
export function FieldList({
  label,
  items,
  emptyText = "None recorded.",
  className,
}: {
  label: string;
  items: string[];
  emptyText?: string;
  className?: string;
}) {
  return (
    <div className={className}>
      {label && (
        <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
          {label}
        </div>
      )}
      {items.length === 0 ? (
        <p className="text-sm text-muted-foreground/70">{emptyText}</p>
      ) : (
        <ul className="space-y-1.5">
          {items.map((item, i) => (
            <li key={i} className="flex gap-2.5 text-[14px] leading-relaxed text-foreground/90">
              <span className="mt-[7px] h-1 w-1 shrink-0 rounded-full bg-accent" />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/** A compact key/value row for metadata strips. */
export function MetaItem({
  label,
  children,
  className,
}: {
  label: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-col gap-1", className)}>
      <span className="text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground">
        {label}
      </span>
      <span className="text-[14px] font-medium text-foreground">{children}</span>
    </div>
  );
}