---
import { Image } from '@astrojs/image/components';

import Button from '@/components/button.astro';
import IconButton from '@/components/icon-button.astro';
import SectionCard from '@/components/section-card.astro';
import TagsList from '@/components/tags-list.astro';
import Typography from '@/components/typography.astro';
import type { SectionKey } from '@/types/data';
import type { MainSection } from '@/types/main-section';

export interface Props extends MainSection {}

const {
  image,
  fullName,
  role,
  socials,
  details,
  description,
  action: { label, url, downloadedFileName },
  tags,
} = Astro.props;

const section: SectionKey = 'main';
---

<SectionCard section={section}>
  <div class="flex flex-col items-start gap-6 sm:flex-row">
    <div class="flex items-center gap-4 sm:flex-col">
      <Image
        src={image}
        alt={fullName}
        class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none"
        format="webp"
        aspectRatio={1}
      />
      <Button href={url} download={downloadedFileName}>{label}</Button>
    </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" id={`${section}-heading`}>{fullName}</Typography>
          <Typography variant="main-subtitle">{role}</Typography>
        </div>
        {
          socials.length > 0 && (
            <div class="flex flex-wrap gap-3 sm:flex-nowrap">
              {socials.map(({ icon, url: iconUrl, name }) => (
                <IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
              ))}
            </div>
          )
        }
      </div>
      <div class="flex flex-col gap-6">
        <div class="inline-grid xl:grid-cols-[auto_auto]">
          {
            details.map(({ label: detailLabel, value }) => (
              <div class="w-fit">
                <Typography variant="paragraph">
                  <span class="text-gray-700 dark:text-gray-300">{detailLabel}: </span>
                  <span class="break-all dark:text-gray-400">{value}</span>
                </Typography>
              </div>
            ))
          }
        </div>
        <div class="flex flex-col gap-4">
          <Typography variant="paragraph">{description}</Typography>
          <TagsList tags={tags} />
        </div>
      </div>
    </div>
  </div>
</SectionCard>