import React from 'react';

export default function Homeworks({ homeworks }) {
  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">Suivi des devoirs</h2>
      <ul className="divide-y divide-gray-100">
        {homeworks.map((hw, idx) => (
          <li
            key={idx}
            className="py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <span className="font-medium">{hw.title}</span>
              <span className="ml-2 text-xs text-gray-400">{hw.dueDate}</span>
            </div>
            <span
              className={`text-xs px-2 py-1 rounded ${hw.status === 'Rendu' ? 'bg-primary/10 text-secondary' : 'bg-yellow-100 text-yellow-700'}`}
            >
              {hw.status}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}
