---
export interface Props {
  post: any;
}

const { post } = Astro.props;
---

<style lang="scss">
    @import 'bulmaswatch/darkly/_variables.scss';
    @import 'bulma/bulma.sass';
    @import 'bulmaswatch/darkly/_overrides.scss';

    .card{
        width: 300px !important;
        margin: 1em;
    }

    .title {
        margin-bottom: .5em !important;
    }

    .tagline{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .posted-date{
        font-size: .75em;
    }

    .post-img{
        margin: auto;
        padding-top: 1em;
        max-width: 280px;
    }
</style>

<div class="card">
  <div class="card-image">
    <figure class="image">
      <img src={post.coverImage} alt="CoverImage" class="post-img">
    </figure>
  </div>
  <div class="card-content">
    <h1 class="title has-text-link">{post.title}</h1>
    <div class="content">
        <p class="tagline">{post.description}</p>
        <a href={post.url}>Read More</a>
        <hr class="dropdown-divider">
        <span class="posted-date">Posted: {post.publishDate}</span>

    </div>
  </div>
</div>