---
type Props = {
    post: {
        title: string
        publishDate: string
        description: string
        url: string
        tags?: string[]
    }
}

const { post } = Astro.props
---

<div class="card">
    <div class="title">
        <a href={post.url}>
            {post.title}
        </a>
    </div>
    <div class="date">
        {
            new Date(post.publishDate)
                .toLocaleDateString('it-IT', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                })
                // to Title Case
                .replace(/(\w)(\w*)/g, (match, p1, p2) => p1.toUpperCase() + p2.toLowerCase())
        }
    </div>
    <div class="description">
        {post.description}
    </div>
    <div class="tags">
        {
            post.tags?.map(tag => (
                <a href={`/posts/tags/${tag}`} class="tag">
                    #{tag}
                </a>
            ))
        }
    </div>
</div>