---
import { formatDateToYYYYMMDD } from '../../utils/date-utils'
import { Icon } from 'astro-icon/components'
import { licenseConfig, profileConfig } from '../../config'
import { i18n } from '../../i18n/translation'
import I18nKey from '../../i18n/i18nKey'

interface Props {
  title: string
  slug: string
  pubDate: Date
  class: string
}

const { title, slug, pubDate } = Astro.props
const className = Astro.props.class
const profileConf = profileConfig
const licenseConf = licenseConfig
const postUrl = decodeURIComponent(Astro.url.toString())
---
<div class=`relative transition overflow-hidden bg-[var(--license-block-bg)] py-5 px-6 ${className}`>
    <div class="transition font-bold text-black/75 dark:text-white/75">
        {title}
    </div>
    <a href={postUrl} class="link text-[var(--primary)]">
        {postUrl}
    </a>
    <div class="flex gap-6 mt-2">
        <div>
            <div class="transition text-black/30 dark:text-white/30 text-sm">{i18n(I18nKey.author)}</div>
            <div class="transition text-black/75 dark:text-white/75 whitespace-nowrap">{profileConf.name}</div>
        </div>
        <div>
            <div class="transition text-black/30 dark:text-white/30 text-sm">{i18n(I18nKey.publishedAt)}</div>
            <div class="transition text-black/75 dark:text-white/75 whitespace-nowrap">{formatDateToYYYYMMDD(pubDate)}</div>
        </div>
        <div>
            <div class="transition text-black/30 dark:text-white/30 text-sm">{i18n(I18nKey.license)}</div>
            <a href={licenseConf.url} target="_blank" class="link text-[var(--primary)] whitespace-nowrap">{licenseConf.name}</a>
        </div>
    </div>
    <Icon name="fa6-brands:creative-commons" class="transition text-[15rem] absolute pointer-events-none right-6 top-1/2 -translate-y-1/2 text-black/5 dark:text-white/5"></Icon>
</div>