---
import type { CollectionEntry } from "astro:content";
import { Image } from "astro:assets";

type Props = {
  member: CollectionEntry<"authors">;
};

const { member } = Astro.props;
const { name, avatar, bio } = member.data;
---

<div
  class="animate not-prose flex flex-col sm:flex-row size-full sm:items-center gap-4 overflow-hidden rounded-xl border border-foreground bg-background p-6 hover:bg-secondary"
>
  <Image
    src={avatar}
    alt={`Avatar of ${name}`}
    width={256}
    height={256}
    class="aspect-square size-32 rounded-md object-cover"
  />
  <div class="flex flex-col justify-between">
    <a href={`/authors/${member.slug}`}>
      <h3 class="mb-2 text-3xl text-foreground">{name}</h3>
      <p class="mb-4 text-sm text-foreground">{bio}</p>
    </a>
  </div>
</div>