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

const { article } = Astro.props;
const datePublished =
  article?.published && new Date(article.published).toDateString();
---
{
  article && (
    <div id="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:global lang="scss">

  @counter-style publish-icons {
    system: cyclic;
    symbols: "️✍️" "🗓️";
    suffix: " ";
  }

    h1.title {
      font-size: xx-large;
    }

    span.source {
      font-weight: bolder;
      color: #555;
    }

    ul.publish-info {
      margin: 0.3em -0.7em 1em;
      list-style: publish-icons;

      li {
        color: #555;
        font-size: small;
      }
    }



  content {
    p, table, ul, img {
      margin: 1em 0 !important;
      font-size: 20px;
    }

    table {
      border-collapse: collapse;
      
      td, th {
        border: 1px solid #ccc;
        padding: 0.5em;
      }
    }

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