import type { ReactNode } from "react";

export type GuidedReviewItem = {
  label: ReactNode;
  value: ReactNode;
  detail?: ReactNode;
  tone?: "neutral" | "success" | "warning" | "danger";
};

type GuidedReviewListProps = {
  items: GuidedReviewItem[];
  emptyText?: ReactNode;
  className?: string;
};

function joinClasses(...classes: Array<string | undefined | false>) {
  return classes.filter(Boolean).join(" ");
}

export default function GuidedReviewList({
  items,
  emptyText = "Nothing to review.",
  className = ""
}: GuidedReviewListProps) {
  if (items.length === 0) {
    return <div className={joinClasses("guided-review-list", "is-empty", className)}>{emptyText}</div>;
  }

  return (
    <dl className={joinClasses("guided-review-list", className)}>
      {items.map((item, index) => (
        <div key={index} className={joinClasses("guided-review-row", item.tone ? `tone-${item.tone}` : undefined)}>
          <dt>{item.label}</dt>
          <dd>
            <strong>{item.value}</strong>
            {item.detail && <span>{item.detail}</span>}
          </dd>
        </div>
      ))}
    </dl>
  );
}
