---
import type { ExperienceSection, Job } from '@/types/experience-section';
import type { I18n } from '@/types/i18n';
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';
import TagsList from '../components/tags-list.astro';

export interface Props extends ExperienceSection {
  jobs: Job[];
  i18n: I18n;
}

const {
  config: { title },
  i18n,
  jobs,
} = Astro.props;
---

<div>
  <SectionHeading>{title}</SectionHeading>
  <div class="flex flex-col">
    {
      jobs.map(({ company, role, description, tags, startDate, endDate }) => () => (
        <>
          <div class="flex flex-col gap-2">
            <ListItemHeading title={role} subtitle={company} startDate={startDate} endDate={endDate} i18n={i18n} />
            <Description content={description} />
            <TagsList label="Technologies" tags={tags} />
          </div>
          <DashedDivider />
        </>
      ))
    }
  </div>
</div>
