---
import IconButton from '@/components/icon-button.astro';
import LabelledValue from '@/components/labelled-value.astro';
import Photo from '@/components/photo.astro';
import TagsList from '@/components/tags-list.astro';
import Timestamp from '@/components/timestamp.astro';
import Typography from '@/components/typography.astro';
import type { I18n } from '@/types/i18n';
import type { Project } from '@/types/portfolio-section';

export interface Props {
  project: Project;
  i18n: I18n;
}
const { project, i18n } = Astro.props;
const { description, details, endDate, name, socials, startDate, tags, image } = project;

const alt = `Thumbnail for ${name} project`;
---

<div class="flex flex-col gap-6">
  <div class="flex flex-col gap-4">
    <div class="flex gap-6">
      <Photo
        src={image}
        alt={alt}
        width={200}
        height={200}
        class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
      />
      <div class="flex w-full flex-col gap-4">
        <div class="flex justify-between">
          <div>
            <Typography variant="item-title">{name}</Typography>
            <Timestamp
              startDate={startDate}
              endDate={endDate}
              locale={i18n.locale}
              translationForNow={i18n.translations.now}
            />
          </div>
          <div class="flex gap-2">
            {
              socials?.map(({ icon, url, name: socialName }) => (
                <IconButton icon={icon} href={url} target="_blank" size="small" aria-label={socialName} />
              ))
            }
          </div>
        </div>
        <Photo class="rounded-lg object-cover max-w-[120px] sm:hidden" src={image} alt={alt} />
        <div class="inline-grid w-full xl:grid-cols-[auto_auto]">
          {
            details.map(({ label: detailLabel, value: detailValue }) => (
              <LabelledValue
                label={detailLabel}
                value={typeof detailValue === 'object' ? detailValue.join(', ') : detailValue}
              />
            ))
          }
        </div>
      </div>
    </div>
    <div class="col-span-3 col-start-1">
      <Typography variant="paragraph">{description}</Typography>
    </div>
  </div>
  <TagsList tags={tags} />
</div>
