import React from 'react';

export default function AcademicResults({ results }) {
  return (
    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
      <h2 className="font-headline text-xl font-semibold mb-4">Résultats académiques</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {results.map((result, idx) => (
          <div
            key={idx}
            className="p-4 rounded-lg bg-primary/5 flex flex-col gap-2 shadow"
          >
            <div className="flex justify-between items-center">
              <span className="font-medium">{result.subject}</span>
              <span className="text-secondary font-bold text-lg">
                {result.grade}/20
              </span>
            </div>
            <div className="text-sm text-gray-600">
              Moyenne classe : {result.average}
            </div>
            <div className="italic text-gray-500">{result.appreciation}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
