import Image from 'next/image';
import type { PortfolioProps } from '@/server/content';
import styles from './EducationSection.module.css';

export const EducationSection = ({ portfolio }: PortfolioProps) => {
  const copy = portfolio.messages.education;

  return (
    <section id="education" className={styles.educationSection}>
      <div className="content-container">
        <div className="section-header" data-reveal="soft">
          <div className="section-title-wrap">
            <h2 className="section-title">{copy.title}</h2>
            <div className="section-underline" />
          </div>
        </div>

        {/* Degree Card */}
        {portfolio.education.map(education => <div key={education.id} className={styles.card} data-reveal-group>
          <div className={styles.crestCol} data-reveal="image">
            <div className={styles.crestContainer}>
              <Image
                src={education.logo.src}
                alt={education.institution}
                fill
                sizes="(max-width: 650px) 12rem, 16.5rem"
                className={styles.crestImage}
              />
            </div>
          </div>

          <div className={styles.detailsCol} data-reveal="soft">
            <h3 className={styles.degreeTitle}>{education.degree}</h3>
            <div className={styles.institution}>{education.institution}</div>
            <div className={styles.date}>{education.date}</div>
            <p className={styles.description}>{education.description}</p>
          </div>
        </div>)}
      </div>
    </section>
  );
};