import siteMetadata from '@/data/siteMetadata'
import projectsData from '@/data/degreeData'
import Card from '@/components/Card'
import { PageSeo } from '@/components/SEO'

export default function Projects() {
  return (
    <>
      <PageSeo
        title={`Mis diplomas y esas cosas - ${siteMetadata.author}`}
        description={siteMetadata.description}
      />
      <div className="divide-y divide-gray-200 dark:divide-gray-700">
        <div className="pt-6 pb-8 space-y-2 md:space-y-5">
          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
            Algunos de mis diplomas
          </h1>
          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
            <a target="_blank" href="/static/documentos/PabloSolana.pdf" rel="noopener noreferrer">
              Y otras cosas como mi CV que puedes descargar dando clic aquí
            </a>
          </p>
        </div>
        <div className="container py-12">
          <div className="flex flex-wrap -m-4">
            {projectsData.map((d) => (
              <Card
                key={d.title}
                title={d.title}
                description={d.description}
                imgSrc={d.imgSrc}
                href={d.href}
              />
            ))}
          </div>
        </div>
      </div>
    </>
  )
}
