import React from 'react';
import type { Certification } from '../../../types';

interface CertificationsProps {
  certifications: Certification[];
}

const Certifications: React.FC<CertificationsProps> = ({ certifications }) => {
  if (!certifications || certifications.length === 0) {
    return null;
  }

  return (
    <div className="bg-white rounded-2xl border border-slate-200 p-6">
      <h2 className="text-xl font-bold text-slate-800 mb-4">Licenses & Certifications</h2>
      <ul className="space-y-4">
        {certifications.map((cert, index) => (
          <li key={index} className="flex items-start gap-4 pt-4 first:pt-0 border-t border-slate-100 first:border-t-0">
            <div className="flex-shrink-0 w-12 h-12 bg-slate-100 rounded-md flex items-center justify-center mt-1 p-1">
              <img 
                src={cert.imageUrl} 
                alt={`${cert.issuer} logo`} 
                className="w-full h-full object-contain rounded-sm"
              />
            </div>
            <div>
              <h3 className="font-semibold text-slate-800">{cert.name}</h3>
              <p className="text-sm text-slate-600">{cert.issuer}</p>
              <p className="text-xs text-slate-400 mt-1">{cert.date}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Certifications;