import { THEME } from '~/assets/global'
import { formatDate } from '~/assets/util'
import { IPostTeaser } from '~/server/db'
import Link from 'next/link'

const PostTeaser = ({ post }: { post: IPostTeaser }) => {
  return (
    <section>
      <h2>
        <Link href={`/post/${post.path}`}>
          <a>{post.title}</a>
        </Link>
      </h2>

      <small>
        <span>
          by&nbsp;
          {THEME.author.url ? (
            <a
              href={THEME.author.url}
              target="_blank"
              rel="noopener noreferrer"
            >
              {THEME.author.name}
            </a>
          ) : (
            <span>{THEME.author.name}</span>
          )}
        </span>

        {post.date ? (
          <span style={{ float: 'right' }}>{formatDate(post.date)}</span>
        ) : null}
      </small>

      <article
        style={{ marginTop: '2rem' }}
        dangerouslySetInnerHTML={{ __html: post.excerptHtml }}
      ></article>
    </section>
  )
}

export default PostTeaser