---
import { Image } from "astro:assets"
import { Icon } from "astro-icon/components";
import "dayjs/locale/es";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
const regionNames = new Intl.DisplayNames(['es'], { type: 'region' });

const locale = Astro.currentLocale;
dayjs.extend(utc);
dayjs.locale(locale);

const { data } = Astro.props;
const nicedate = dayjs.utc(data.data.date).format("D MMMM YYYY");
const countryName = data?.data?.country ? regionNames.of(data.data.country) : "";

const locationArray = [data.data.city,countryName]
locationArray.filter(Boolean).join(', ');
---

<div>
    <h3 class="text-2xl font-bold mb-1 font-secondary text-tertiary"><a href={`/${locale}/news/${data.id}`}>{data.data.title}</a></h3>

    {
        data.data.city &&  <span class="font-normal font-primary text-lg text-tertiary/70">
        {locationArray.filter(Boolean).join(', ')} | </span> 
    }
    <span class="font-normal font-primary text-lg text-tertiary/70">{nicedate}</span>

</div>