---
import { ArticleData } from "@extractus/article-extractor";
export interface Props {
  article: ArticleData;
}

const article = Astro.props.article;
const datePublished =
  article?.published && new Date(article.published).toDateString();
---

{
  article && (
    <div class="post">
      {article.source && <span class="source">{article.source}</span>}
      {article.title && <h1 class="title">{article.title}</h1>}
      {(article.author || datePublished) && (
        <ul class="publish-info">
          {article.author && <li>️{article.author} </li>}
          {datePublished && <li>️{datePublished}</li>}
        </ul>
      )}
      <content set:html={article.content} />
    </div>
  )
}

<style is:inline>
  div.post {
    max-width: 600px;
    margin: 1em auto;
    padding: 1em;
  }
  @counter-style publish-icons {
    system: cyclic;
    symbols: "️✍️" "🗓️";
    suffix: " ";
  }
  ul.publish-info {
    margin: 0.3em -0.7em 1em;
    list-style: publish-icons;
  }
  h1.title {
    font-size: xx-large;
  }
  span.source {
    font-weight: bolder;
    color: #555;
  }

  ul.publish-info li {
    color: #555;
    font-size: small;
  }
  p,
  img,
  table,
  ul {
    margin: 1em 0;
    font-size: 20px;
  }

  pre {
    white-space: pre-wrap;
  }
</style>