---
import { Image } from "astro:assets"
import { Icon } from "astro-icon/components";
import "dayjs/locale/es";
import "dayjs/locale/fr";
import "dayjs/locale/he";
import "dayjs/locale/uk";
import "dayjs/locale/pt";
import "dayjs/locale/ru";
import "dayjs/locale/rw";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { getLocalizedRoute, createTranslator } from "../../i18n";

const locale = Astro.currentLocale || "es";
const tl = createTranslator(locale);
const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
dayjs.extend(utc);
dayjs.locale(locale);

const { data, routeKey = "news" } = 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 class="bg-[#EBE5D0] text-[#003421] p-10">
    <div class="flex md:flex-col items-center content-center md:items-baseline">
      <Icon name="ph:arrow-circle-down-thin" class="md:text-8xl text-7xl mb-0 md:mb-8" />
      {nicedate ? (
        <p class="font-light md:text-2xl text-lg ml-2 md:ml-0 md:mb-8 mb-3">
            {locationArray.filter(Boolean).join(', ')}<br />
          ({nicedate}):
        </p>
      ) : (
        <p class="font-light md:text-2xl text-lg md:mb-8 mb-3">
          {locationArray.filter(Boolean).join(', ')}:
        </p>
      )}
    </div>
  <h3 class="md:text-2xl text-lg mb-4 font-bold md:mb-8 hover:underline"><a href={`/${locale}/${getLocalizedRoute(routeKey, locale)}/${data.id}`}>{data.data.title}</a></h3>

  <div class="overflow-hidden">
      <a href={`/${locale}/${getLocalizedRoute(routeKey, locale)}/${data.id}`}>
    <Image
      src={data.data.thumbnail}
      alt={data.data.title}
      class="aspect-square object-cover transition-transform duration-300 hover:scale-110"
        />
    </a>
  </div>

  <div class="mt-8">
      <a href={`/${locale}/${getLocalizedRoute(routeKey, locale)}/${data.id}`} class="inline-flex items-center gap-2 px-6 py-3 bg-white text-[#22523F] hover:bg-[#22523F] hover:text-[#EBE6D2] hover:underline font-bold transition text-sm rounded-none uppercase">
          {tl(routeKey + ".fullnew")}
          <Icon name="ph:arrow-right" class="transform group-hover:translate-x-1 transition-transform" />
      </a>
  </div>

</div>
