---
import type { Job } from '@/types/sections/experience-section.types';
import Description from '@/web/components/description.astro';
import LinkButton from '@/web/components/link-button.astro';
import TagsList from '@/web/components/tags-list.astro';
import Thumbnail from '@/web/components/thumbnail.astro';
import Timestamp from '@/web/components/timestamp.astro';
import Typography from '@/web/components/typography.astro';

export interface Props extends Job {}

const { role, company, dates, description, links, tagsList, image } = Astro.props;
---

<div class="flex flex-col gap-3">
  <div class="flex w-full justify-between gap-2">
    <div class="flex gap-4">
      <Thumbnail src={image} alt={`${company} logo`} size="large" />
      <div class="flex flex-col">
        <Typography variant="item-title">{role}</Typography>
        <Typography variant="item-subtitle-primary" class="mb-0.5">{company}</Typography>
        <Timestamp dates={dates} />
      </div>
    </div>
    {
      links.length > 0 && (
        <div class="flex flex-wrap gap-3 sm:flex-nowrap">
          {links.map((link) => (
            <LinkButton {...link} />
          ))}
        </div>
      )
    }
  </div>
  <Description content={description} class="mb-3" />
  <TagsList {...tagsList} />
</div>
