---
import type { FrontmatterImage } from '~/types'
import { Image } from 'astro:assets'

interface Props {
  avatarImage?: FrontmatterImage
}
const { avatarImage } = Astro.props
---

<div
  class="flex flex-col sm:flex-row items-center justify-around sm:gap-5 max-w-full mb-6 py-10 bg-accent/8 p-4 rounded-xl"
>
  {
    avatarImage && (
      <Image
        src={avatarImage.src}
        alt={avatarImage.alt}
        class="rounded-full border-8 border-accent/15 size-36 aspect-square box-content shrink-0"
        widths={[288]}
        height={144}
        width={144}
      />
    )
  }
  <div>
    <div class:list={['m-4 max-w-full prose']}>
      <slot />
    </div>
  </div>
</div>