import React from 'react';
import { cn } from '../../utils/classNames';
import type { ApprovalSummaryItem } from '../../utils/approvalViewModels';

const toneDot: Record<NonNullable<ApprovalSummaryItem['tone']>, string> = {
  neutral: 'bg-app-border-strong',
  brand: 'bg-brand',
  warning: 'bg-warning',
  danger: 'bg-danger',
  success: 'bg-success',
};

/**
 * A compact, single-bordered list of approval items (one row each) — replaces the
 * stack of individually-bordered panels so the modals read cleanly.
 */
const ApprovalItemList: React.FC<{ items: ApprovalSummaryItem[] }> = ({ items }) => (
  <ul className="divide-y divide-app-border overflow-hidden rounded-xl border border-app-border">
    {items.map((item, index) => (
      <li key={`${item.title}-${index}`} className="px-4 py-3">
        <div className="flex items-start gap-2.5">
          <span
            aria-hidden="true"
            className={cn('mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full', toneDot[item.tone ?? 'neutral'])}
          />
          <div className="min-w-0 flex-1">
            <p className="text-sm font-medium text-app-text">{item.title}</p>
            <p className="mt-0.5 text-sm leading-6 text-app-muted">{item.description}</p>
            {item.details && item.details.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-app-muted">
                {item.details.map((detail) => (
                  <span key={`${detail.label}-${detail.value}`} className="break-words">
                    <span className="font-medium text-app-muted-strong">{detail.label}:</span> {detail.value}
                  </span>
                ))}
              </div>
            )}
          </div>
        </div>
      </li>
    ))}
  </ul>
);

export default ApprovalItemList;