---
import { formatDateToYYYYMMDD } from '../utils/date-utils'
import { Icon } from 'astro-icon/components'
import { i18n } from '../i18n/translation'
import I18nKey from '../i18n/i18nKey'
import { url } from '../utils/url-utils'

interface Props {
  class: string
  published: Date
  tags: string[]
  category: string
  hideTagsForMobile?: boolean
}
const { published, tags, category, hideTagsForMobile = false } = Astro.props
const className = Astro.props.class
---

<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
    <!-- publish date -->
    <div class="flex items-center">
        <div class="meta-icon"
        >
            <Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
        </div>
        <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
    </div>

    <!-- categories -->
    <div class="flex items-center">
        <div class="meta-icon"
        >
            <Icon name="material-symbols:book-2-outline-rounded" class="text-xl"></Icon>
        </div>
        <div class="flex flex-row flex-nowrap items-center">
            <a href={url(`/archive/category/${category || 'uncategorized'}/`)} aria-label=`View all posts in the ${category} category`
               class="link-lg transition text-50 text-sm font-medium
                            hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                {category || i18n(I18nKey.uncategorized)}
            </a>
        </div>
    </div>

    <!-- tags -->
    <div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>
        <div class="meta-icon"
        >
            <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
        </div>
        <div class="flex flex-row flex-nowrap items-center">
            {(tags && tags.length > 0) && tags.map((tag, i) => (
                <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
                <a href={url(`/archive/tag/${tag}/`)} aria-label=`View all posts with the ${tag} tag`
                   class="link-lg transition text-50 text-sm font-medium
                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                    {tag}
                </a>
            ))}
            {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
        </div>
    </div>
</div>

<style>
@tailwind components;

@layer components {
    .meta-icon {
        @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
        text-[var(--btn-content)] mr-2
    }
    .with-divider {
        @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
        before:font-medium before:first-of-type:hidden before:transition
    }
}
</style>