---
import Paragraph from "@/components/Paragraph.astro";
import Link from "@/components/Link.astro";
import { Image } from "astro:assets";

type Props = {
  name: string;
  links: { text: string; url: string }[];
  image: { src: ImageMetadata; alt: string };
  reverse?: boolean;
};

const props: Props = Astro.props;
---

<div
  class={"flex justify-around items-center" +
    (props.reverse
      ? " md:flex-row-reverse flex-col-reverse"
      : " md:flex-row flex-col")}
>
  <div class="basis-1/3 my-7">
    <Image
      src={props.image.src}
      alt={props.image.alt}
      class="rounded-lg max-h-96 md:max-h-none"
    />
  </div>
  <div class="basis-1/2 my-7">
    <div>
      <h2 class="font-display text-xl md:text-2xl font-bold tracking-tighter">
        {props.name}
      </h2>
      <Paragraph>
        <slot />
      </Paragraph>
      {
        props.links.map(({ text, url }) => (
          <Link href={url} target="about:blank">
            {text}
          </Link>
        ))
      }
    </div>
  </div>
</div>