---
import BlogCard from "@components/blog/Card.astro";
import Social from "@components/common/Social.astro";
import BaseLayout from "@components/base/BaseLayout.astro";
import { Image } from "astro:assets";
import { render } from "astro:content";
import type { AuthorsEntry, BlogEntry } from "@/types";

interface Props {
  entry: AuthorsEntry;
  recentBlogEntries: BlogEntry[];
}

const { entry, recentBlogEntries } = Astro.props;
const { title, social, description, image, imageAlt } = entry.data;

const { Content } = await render(entry);
---

<BaseLayout title={title} description={description} image={image?.src}>
  <section class="section-sm pb-0">
    <div class="container">
      <div
        class="row justify-center border-b border-border pb-14 dark:border-darkmode-border"
      >
        <div
          class="glass rounded-lg p-4 text-center lg:col-4 intersect:animate-fadeUp opacity-0"
        >
          {
            image && (
              <Image
                class="mx-auto mb-10 rounded"
                src={image}
                alt={imageAlt}
                height={200}
                width={200}
                loading="eager"
              />
            )
          }
          <h1 class="h3 mb-6">{title}</h1>
          <div class="mb-6">
            <Content />
          </div>
          <Social links={social} />
        </div>
      </div>
      <div class="row justify-center pb-16 pt-14">
        {
          recentBlogEntries.map((entry) => (
            <div class="mb-8 md:col-6 lg:col-4">
              <BlogCard entry={entry} />
            </div>
          ))
        }
      </div>
    </div>
  </section>
</BaseLayout>
