import React from 'react';

interface CertificationPanelProps {
  certifications: Array<{ id: string; name: string; status: string }>;
  onCertClick: (id: string) => void;
}

export const CertificationPanel: React.FC<CertificationPanelProps> = ({ certifications, onCertClick }) => {
  return (
    <div className="certification-panel">
      <h2>Certifications</h2>
      <ul>
        {certifications.map((cert) => (
          <li key={cert.id} onClick={() => onCertClick(cert.id)}>
            <span>{cert.name}</span> <span className={`status ${cert.status}`}>{cert.status}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};