---
import type { EducationSection } from '@/types/sections/education-section.types';
import DashedDivider from '../components/dashed-divider.astro';
import Description from '../components/description.astro';
import ListItemHeading from '../components/list-item-heading.astro';
import SectionHeading from '../components/section-heading.astro';

export interface Props extends EducationSection {}

const { config, diplomas } = Astro.props;
---

<div>
  <SectionHeading>{config.title}</SectionHeading>
  <div class="flex flex-col">
    {
      diplomas.map(({ title, description, institution, dates }) => () => (
        <>
          <div class="flex flex-col gap-2">
            <ListItemHeading title={title} subtitle={institution} dates={dates} />
            <Description content={description} />
          </div>
          <DashedDivider />
        </>
      ))
    }
  </div>
</div>
