---
import LinkButton from "../buttons/LinkButton.astro";
const { post } = Astro.props;
---

<style>
    .postcard {
        background-color: #2c3e50;
        color: white;
        padding: 1rem 3rem;
        border-radius: 6px;
        width: 65%;
        margin: 2rem auto;
        border: 3px solid #34495e;
        box-shadow: 15px 8px #e74c3c;
    }

    .tags {
        margin-top: 1rem;
    }

    .tags > a {
        background-color: #c0392b;
        color: white;
        text-decoration: none;
        margin: 0 1rem 0 0;
        padding: 0.2rem 0.4rem;
        border-radius: 6px;
    }
</style>
<div class="postcard">
    <div class="tags">
        {
            post.frontmatter.tags.map((tag: string) => (
                <a href={`/tags//`}>#{tag}</a>
            ))
        }
    </div>
    <h1>{post.frontmatter.title}</h1>
    <p>{post.frontmatter.description}</p>
    <LinkButton url={post.url} buttonText="See More" />
</div>