import PostMeta from '@components/PostMeta/PostMeta';
import { t } from '@lingui/macro';
import { ArticleMeta, ArticlePreview } from '@ts/types/articles';
import Link from 'next/link';
import styles from './PostPreview.module.scss';
import Image from 'next/image';
import { ButtonLink } from '@components/Buttons';
import { ArrowIcon } from '@components/Icons';

type TitleLevel = 2 | 3 | 4 | 5 | 6;

const PostPreview = ({
  post,
  titleLevel,
}: {
  post: ArticlePreview;
  titleLevel: TitleLevel;
}) => {
  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;

  const meta: ArticleMeta = {
    commentCount: post.commentCount ? post.commentCount : 0,
    dates: post.dates,
    subjects: post.subjects,
    thematics: post.thematics,
  };

  return (
    <article className={styles.wrapper}>
      {post.featuredImage && Object.keys(post.featuredImage).length > 0 && (
        <div className={styles.cover}>
          <Image
            src={post.featuredImage.sourceUrl}
            alt={post.featuredImage.altText}
            layout="fill"
            objectFit="contain"
          />
        </div>
      )}
      <header className={styles.header}>
        <TitleTag className={styles.title}>
          <Link href={`/article/${post.slug}`}>
            <a>{post.title}</a>
          </Link>
        </TitleTag>
      </header>
      <div
        className={styles.body}
        dangerouslySetInnerHTML={{ __html: post.intro }}
      ></div>
      <footer className={styles.footer}>
        <ButtonLink target={`/article/${post.slug}`} position="left">
          {t`Read more`}
          <span className="screen-reader-text">
            {' '}
            {t({ message: `about ${post.title}`, comment: 'Post title' })}
          </span>
          <ArrowIcon />
        </ButtonLink>
      </footer>
      <PostMeta meta={meta} />
    </article>
  );
};

export default PostPreview;
sx?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>diff</a><a href='/www.armandphilippot.com/stats/src/components/Widgets/index.tsx?h=v1.0.0'>stats</a></td><td class='form'><form class='right' method='get' action='/www.armandphilippot.com/log/src/components/Widgets/index.tsx'>
<input type='hidden' name='h' value='v1.0.0'/><input type='hidden' name='id' value='e31c39762d2da4f7aa81389605c16f408edaf11e'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>root</a>/<a href='/www.armandphilippot.com/tree/src?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>src</a>/<a href='/www.armandphilippot.com/tree/src/components?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>components</a>/<a href='/www.armandphilippot.com/tree/src/components/Widgets?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>Widgets</a>/<a href='/www.armandphilippot.com/tree/src/components/Widgets/index.tsx?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>index.tsx</a></div><div class='content'>blob: 8354449526203bbe98e2407c1fb14bed8f7586d8 (<a href='/www.armandphilippot.com/plain/src/components/Widgets/index.tsx?h=v1.0.0&amp;id=e31c39762d2da4f7aa81389605c16f408edaf11e'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
</pre></td>
<td class='lines'><pre><code>