---

const { slug, title, description, count, publishDate } = Astro.props

interface Props {
    slug: string
    title: string
    description: string
    count: number
    publishDate: string
}
---

<a href=`/categories/${slug}` class="flex flex-col justify-between size-full bg-neutral-100 shadow-lg rounded-lg p-5 dark:bg-neutral-900/30 group">
    <div class="flex justify-between items-center mb-3">
        <div class="flex justify-center gap-x-4 items-center">
            <div class="flex-shrink-0">
                <h3 class="text-lg font-semibold tracking-tight text-neutral-600 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-orange-300">
                    {title}
                </h3>
            </div>
        </div>
    </div>

    <p class="block text-neutral-500 min-h-[60px] group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
        {description}
    </p>

    <div class="flex mt-2 mb-0 gap-x-5">
        <span class="text-xs inline-flex items-center rounded me-2 text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
            <svg
                class="w-3 h-3 me-1.5"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <rect width="8" height="4" x="8" y="2" rx="1" />
                <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5" />
                <path d="M16 4h2a2 2 0 0 1 1.73 1" />
                <path d="M8 18h1" />
                <path d="M18.4 9.6a2 2 0 0 1 3 3L17 17l-4 1 1-4Z" />
            </svg>
            {count} posts
        </span>
        <span class="text-xs inline-flex items-center rounded me-2 text-neutral-500 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
            <svg
                class="w-3 h-3 me-1.5"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>
            update {publishDate}
        </span>
    </div>
</a>
