import React from 'react';

export default function WorkPlan({ workPlan }) {
  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">
        Plan de travail personnalisé
      </h2>
      <div className="flex flex-col gap-3">
        {workPlan.map((plan, idx) => (
          <div
            key={idx}
            className="p-3 rounded border border-primary/10 bg-primary/5 flex flex-col sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <span className="font-medium">{plan.objective}</span>
              <span className="ml-2 text-xs text-gray-500">
                ({plan.support})
              </span>
            </div>
            <span className="text-xs px-2 py-1 rounded bg-primary/20 text-secondary mt-1 sm:mt-0">
              {plan.followUp}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
