---
import { Icon } from "astro-icon/components";

import { getPostUrlBySlug } from "@utils/url";
import { postConfig, profileConfig } from "@/config";
import { formatDateToYYYYMMDD } from "@utils/date";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";


interface Props {
    title: string;
    id: string;
    pubDate: Date;
    class: string;
    author: string;
    sourceLink: string;
    licenseName: string;
    licenseUrl: string;
    postUrl?: string;
}

const { title, id, pubDate, author, sourceLink, licenseName, licenseUrl, postUrl: propPostUrl } =
    Astro.props;
const className = Astro.props.class;
const profileConf = profileConfig;
const licenseConf = postConfig.license;
const postUrl = sourceLink || propPostUrl || getPostUrlBySlug(id);
---

<div class={`relative transition overflow-hidden bg-(--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-(--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 line-clamp-2">{author || 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 line-clamp-2">{formatDateToYYYYMMDD(pubDate)}</div>
        </div>
        <div>
            <div class="transition text-black/30 dark:text-white/30 text-sm">{i18n(I18nKey.license)}</div>
            <a href={licenseName ? (licenseUrl || undefined) : licenseConf.url} target="_blank" class="link text-(--primary) line-clamp-2">{licenseName || 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>