import { cn } from "@/lib/utils";
import type { LocalizedFeatureProperty } from "../utils/feature-properties";

type FeaturePropertyListProps = {
  entries: LocalizedFeatureProperty[];
  variant?: "insight" | "popover";
};

export function FeaturePropertyList({
  entries,
  variant = "insight"
}: FeaturePropertyListProps) {
  if (entries.length === 0) {
    return <p className="py-3 text-center text-sm text-slate-500">暂无可展示属性</p>;
  }

  return (
    <dl className={cn(
      "surface-reading divide-y divide-slate-100 border",
      variant === "popover" ? "rounded-xl px-3" : "rounded"
    )}>
      {entries.map((entry) => (
        <div
          key={entry.key}
          className={cn(
            "grid",
            variant === "popover"
              ? "min-h-10 grid-cols-[96px_minmax(0,1fr)] items-baseline gap-3 py-2.5"
              : "grid-cols-[110px_minmax(0,1fr)] gap-2 px-3 py-2 text-sm"
          )}
        >
          <dt className={cn(
            "text-slate-500",
            variant === "popover" ? "text-xs font-medium leading-5" : "truncate"
          )}>
            {entry.label}
          </dt>
          <dd className={cn(
            "font-medium text-slate-800",
            variant === "popover"
              ? "break-words text-right text-sm font-semibold leading-5 tabular-nums"
              : "truncate",
            entry.value === "暂无" && "font-medium text-slate-400"
          )}>
            {entry.value}
          </dd>
        </div>
      ))}
    </dl>
  );
}