src/components/EducationCard.js

import React from 'react';

const EducationCard = ({ education }) => {
  return (
    <div className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
      <div className="flex justify-between flex-wrap">
        <h3 className="font-bold text-lg">{education.degree}</h3>
        <span className="text-gray-600">{education.period}</span>
      </div>
      <p className="text-primary font-medium">{education.institution}</p>
      {education.gpa && <p className="text-gray-600 mt-1">GPA: {education.gpa}</p>}
      {education.description.length > 0 && (
        <ul className="mt-2 list-disc list-inside text-gray-700">
          {education.description.map((item, idx) => (
            <li key={idx}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default EducationCard;