import React from 'react';

export default function Remarks({ remarks }) {
  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">Remarques & observations</h2>
      <ul className="divide-y divide-gray-100">
        {remarks.map((remark, idx) => (
          <li
            key={idx}
            className="py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <span className="font-medium">{remark.teacher}</span>
              <span className="ml-2 text-xs text-gray-400">{remark.date}</span>
            </div>
            <div className="text-gray-700 mt-1 sm:mt-0">{remark.comment}</div>
          </li>
        ))}
      </ul>
    </div>
  );
}
