import React from 'react'
import Image from 'next/image'
import type { Author } from 'types/payload-types'

interface Props {
  author: Author
}

const AuthorComponent: React.FC<Props> = ({ author }) => {
  return (
    <>
      {author && (
        <div className="flex gap-6 border-t-2 border-secondary py-4 text-secondary">
          {typeof author.avatar === 'object' && (
            <Image
              src={author.avatar.url || ''}
              width={100}
              height={10}
              alt={author.avatar.alt || ''}
              layout="fixed"
            />
          )}
          <div className="flex flex-col">
            <h3 className="">{author.name}</h3>
            <p className="text-sm font-light">{author.bio}</p>
          </div>
        </div>
      )}
    </>
  )
}

export default AuthorComponent