---
import { Image } from "astro:assets";
import Social from "@/components/Social.astro";
import { markdownify } from "@/lib/utils/textConverter";

const { author } = Astro.props;
const { title, image, social } = author.data;
const { Content } = await author.render();
---

<section class="section">
  <div class="container">
    <div class="mb-4 text-center md:px-24">
      {
        image && (
          <div class="mb-8">
            <Image
              src={image}
              class="mx-auto rounded-lg"
              height={150}
              width={150}
              alt={title}
            />
          </div>
        )
      }
      <h1 set:html={markdownify(title)} class="page-heading h2 mb-8" />

      <Social source={social} className="social-icons-simple" />
      <div class="content">
        <Content />
      </div>
    </div>
  </div>
</section>
