---
import type { PortfolioSection } from '@/types/sections/portfolio-section.types';
import DashedDivider from '../components/dashed-divider.astro';
import Description from '../components/description.astro';
import LabelledValue from '../components/labelled-value.astro';
import ListItemHeading from '../components/list-item-heading.astro';
import SectionHeading from '../components/section-heading.astro';
import TagsList from '../components/tags-list.astro';

export interface Props extends PortfolioSection {}

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

<div>
  <SectionHeading>{config.title}</SectionHeading>
  <div class="flex flex-col">
    {
      projects.map(({ name, description, details, pdfDetails, tagsList, dates }) => () => (
        <>
          <div class="flex flex-col gap-2">
            <ListItemHeading title={name} dates={dates} />
            <Description content={description} />
            <div class="flex flex-col gap-1">
              {(pdfDetails ?? details).map((detail) => (
                <LabelledValue {...detail} />
              ))}
            </div>
            <TagsList {...tagsList} />
          </div>
          <DashedDivider />
        </>
      ))
    }
  </div>
</div>