---
import type { MainSection } from '@/types/sections/main-section.types';
import Photo from '@/components/photo.astro';
import Description from '@/pdf/components/description.astro';
import LabelledValue from '@/pdf/components/labelled-value.astro';

export interface Props extends MainSection {}

const { image, fullName, role, details, pdfDetails, description } = Astro.props;
---

<div class="flex flex-col gap-4">
  <div class="flex gap-6">
    <Photo src={image} alt={fullName} class="w-40 h-40 max-w-[160px] max-h-[160px] rounded-2xl" />
    <div>
      <div class="text-3xl font-extrabold text-gray-900">{fullName}</div>
      <div class="text-lg font-medium text-gray-700">{role}</div>
      <div class="grid grid-cols-[auto_auto] gap-x-4 gap-y-1 pt-4">
        {
          (pdfDetails ?? details).map((detail) => (
            <LabelledValue {...detail} class={detail.fullRow ? 'col-span-2' : undefined} />
          ))
        }
      </div>
    </div>
  </div>
  <Description content={description} />
</div>