---
import IconButton from '@/atoms/icon-button.astro';
import Timestamp from '@/atoms/timestamp.astro';
import Typography from '@/atoms/typography.astro';
import type { Job } from '@/types/experience-section';
import type { I18n } from '@/types/i18n';

import TagsList from '../molecules/tags-list.astro';

export interface Props {
  job: Job;
  i18n: I18n;
}
const { job, i18n } = Astro.props;
---

<div class="flex flex-col gap-2 md:gap-0">
  <div class="flex w-full flex-row justify-between">
    <div>
      <Typography variant="item-title">
        {job.role}
        <span class="font-medium"> &#8212;&nbsp;{job.company}</span>
      </Typography>
    </div>
    <div class="flex flex-wrap gap-2">
      {
        job.socials?.map(({ icon, url, name }) => (
          <IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
        ))
      }
    </div>
  </div>
  <Timestamp
    startDate={job.startDate}
    endDate={job.endDate}
    locale={i18n.locale}
    translationForNow={i18n.translations.now}
  />
  <ul class="ml-[18px] list-disc pt-3 pb-6 text-white">
    {
      Array.isArray(job.description) ? (
        job.description.map((d) => (
          <li>
            <Typography variant="paragraph">{d}</Typography>
          </li>
        ))
      ) : (
        <li>
          <Typography variant="paragraph">{job.description}</Typography>
        </li>
      )
    }
  </ul>
  <TagsList tags={job.tags} />
</div>