import { Certification } from "@/components/cert";
import { Rule } from "@/components/rule";
import { Certifications } from "@/config/Certifications";
import { Charm } from "next/font/google";

const Certs = (): JSX.Element => {
  return (
    <>
      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
        <h1 className="text-5xl">Certs</h1>
        <section>
          <p className="mb-2">
            This page lists the professional certifications Naomi has obtained
            throughout her time as a developer.
          </p>
          <Rule />
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
            {Certifications.sort(
              (a, b) => b.date.getTime() - a.date.getTime(),
            ).map((cert) => (
              <Certification
                key={cert.name}
                name={cert.name}
                fileName={cert.fileName}
                issuer={cert.issuer}
                date={cert.date}
              />
            ))}
          </div>
        </section>
      </main>
    </>
  );
};

export default Certs;