"use client"
import React from "react" // Import React
import styles from "./FolderContent.module.css"

const CertificationsFolder: React.FC = () => { // Add React.FC type
  return (
    <div className={styles.folderContainer}>
      <h1 className={styles.folderTitle}>Certifications</h1>

      <div className={styles.certificationsList}>
        <div className={styles.certificationItem}>
          <h2>Certified Psychological Counselor</h2>
          <p className={styles.certificationIssuer}>British University & Egyptian Ministry of Foreign Affairs</p>
          <p className={styles.certificationDate}>Professional Certification</p>
        </div>

        <div className={styles.certificationItem}>
          <h2>Laravel Professional Courses</h2>
          <p className={styles.certificationIssuer}>Multiple Platforms</p>
          <p className={styles.certificationDate}>30+ Completed Courses</p>
        </div>

        <div className={styles.certificationItem}>
          <h2>Vue.js & API Design</h2>
          <p className={styles.certificationIssuer}>Professional Development</p>
          <p className={styles.certificationDate}>Advanced Level</p>
        </div>

        <div className={styles.certificationItem}>
          <h2>Programming Problem Solving</h2>
          <p className={styles.certificationIssuer}>Codeforces & HackerRank</p>
          <p className={styles.certificationDate}>100+ Problems Solved</p>
        </div>
      </div>
    </div>
  )
}

export default CertificationsFolder; // Export as default