---
import type { MainSection } from '@/types/sections/main-section.types';
import Description from '@/web/components/description.astro';
import DownloadButton from '@/web/components/download-button.astro';
import LinkButton from '@/web/components/link-button.astro';
import Photo from '@/components/photo.astro';
import SectionCard from '@/web/components/section-card.astro';
import TagsList from '@/web/components/tags-list.astro';
import Typography from '@/web/components/typography.astro';
import LabelledValue from '@/web/components/labelled-value.astro';

export interface Props extends MainSection {}

const { action, config, description, details, fullName, image, links, role, tags } = Astro.props;
---

<SectionCard {...config} hideTitle>
  <div class="flex flex-col items-start gap-6 sm:flex-row">
    <div class="flex items-center gap-4 sm:flex-col">
      <Photo
        src={image}
        alt={fullName}
        width={320}
        height={320}
        class="h-24 w-24 max-w-none rounded-lg sm:h-36 sm:w-36 md:h-52 md:w-52"
      />
      <DownloadButton {...action} />
    </div>
    <div class="flex w-full flex-col gap-5">
      <div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
        <div class="w-full">
          <Typography variant="main-title">{fullName}</Typography>
          <Typography variant="main-subtitle">{role}</Typography>
        </div>
        {
          links.length > 0 && (
            <div class="flex flex-wrap gap-3 sm:flex-nowrap">
              {links.map((link) => (
                <LinkButton {...link} />
              ))}
            </div>
          )
        }
      </div>
      <div class="flex flex-col gap-6">
        <div class="inline-grid xl:grid-cols-[auto_auto]">
          {details.map((detail) => <LabelledValue {...detail} />)}
        </div>
        <div class="flex flex-col gap-4">
          <Description content={description} />
          <TagsList tags={tags} />
        </div>
      </div>
    </div>
  </div>
</SectionCard>