import React from 'react';

export default function SpecificEvaluations({ specificEvaluations }) {
  return (
    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
      <h2 className="text-xl font-semibold mb-4">Évaluations spécifiques</h2>
      <div className="flex flex-col gap-3">
        {specificEvaluations.map((evalItem, idx) => (
          <div
            key={idx}
            className="p-3 rounded border border-blue-100 bg-blue-50 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <span className="font-medium">{evalItem.test}</span>
              <span className="ml-2 text-xs text-gray-500">
                {evalItem.date}
              </span>
            </div>
            <span className="text-xs px-2 py-1 rounded bg-blue-200 text-blue-800 mt-1 sm:mt-0">
              {evalItem.result}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}