---
import type { AuthorsEntry } from "@/types";
import { plainify } from "@lib/textConverter";
import { Image } from "astro:assets";
import Social from "@components/common/Social.astro";

interface Props {
  entry: AuthorsEntry;
}

const { entry }: Props = Astro.props;
const { title, image, imageAlt, social } = entry.data;
const bodyBrief = entry.body ? plainify(entry.body?.slice(0, 100)) : null;
---

<div class="mb-14 md:col-6 lg:col-4">
  <div
    class="glass rounded-lg p-4 text-center intersect:animate-fadeUp opacity-0"
  >
    {
      image && (
        <Image
          class="mx-auto mb-6 rounded"
          src={image}
          alt={imageAlt}
          width={120}
          height={120}
          loading="eager"
        />
      )
    }
    <h4 class="mb-3">
      <a href={`/authors/${entry.id}`}>{title}</a>
    </h4>
    {bodyBrief && <p class="mb-4">{bodyBrief}</p>}
    <Social links={social} />
  </div>
</div>
