import React from 'react';

interface FieldResultItem {
  field_path: string;
  evaluation_as: string;
  weight: number;
  scored: number;
  status: string;  // 'filled' | 'placeholder'
  value: string;
  page?: string;
  ai_feedback?: string;
}

interface FieldResultListProps {
  items: FieldResultItem[];
}

export function FieldResultList({ items }: FieldResultListProps) {
  return (
    <div className="field-result-list">
      {items.map((item) => (
        <div
          key={item.field_path}
          className={`field-result-item field-result-item--${item.status}`}
        >
          <div className="field-result-item__header">
            <span className="field-result-item__name">
              {item.status === 'filled' ? '✅' : '⚠️'} {item.evaluation_as}
            </span>
            <span className="field-result-item__score">
              {item.scored}/{item.weight}
            </span>
          </div>
          <div className="field-result-item__value">
            {item.value}
          </div>
          {item.ai_feedback && (
            <div className="field-result-item__feedback">
              💬 {item.ai_feedback}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}