---
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="not-prose flex size-full flex-col gap-4 overflow-hidden rounded-xl border p-6 hover:bg-secondary sm:flex-row sm:items-center"
>
  <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>
