---
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;
import { createTranslator } from "@/i18n";
const tl = createTranslator(Astro.currentLocale);
dayjs.extend(utc);
dayjs.locale(locale);

const { data, content } = 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, data.data.state, countryName];
const location = locationArray.filter(Boolean).join(", ");

const newsUrl = `/${locale}/news/${data.id}`;

const rawContent = content?.body || "";
const plainText = rawContent
    .replace(/^#.*$/gm, "")
    .replace(/^###.*$/gm, "")
    .replace(/\*\*([^*]+)\*\*/g, "$1")
    .replace(/\*([^*]+)\*/g, "$1")
    .replace(/_([^_]+)_/g, "$1")
    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
    .replace(/^>.*$/gm, "")
    .replace(/`[^`]+`/g, "")
    .replace(/^[-*]\s+/gm, "")
    .trim();
const words = plainText
    .split(/\s+/)
    .filter((w) => w.length > 0)
    .slice(0, 40);
const excerpt = words.join(" ") + (words.length === 40 ? "..." : "");
---

<a href={newsUrl} class="block group">
    <article
        class="flex flex-col md:flex-row gap-6 md:gap-8 p-4 md:p-6 border-b border-tertiary/20 hover:bg-tertiary/5 transition-colors"
    >
        <div class="md:w-1/3 flex-shrink-0 overflow-hidden">
            <Image
                src={data.data.thumbnail_square || data.data.thumbnail}
                alt={data.data.title}
                width={480}
                height={340}
                class="w-full h-48 md:h-full object-cover transform group-hover:scale-105 transition-transform duration-300"
            />
        </div>

        <div class="md:w-2/3 flex flex-col">
            <div class="flex items-center gap-2 mb-2">
                <span class="font-normal font-primary text-sm text-tertiary/70"
                    >{nicedate}
                </span>
                {
                    location && (
                        <>
                            <span class="text-tertiary/40">|</span>
                            <span class="font-normal font-primary text-sm text-tertiary/70">
                                {location}
                            </span>
                        </>
                    )
                }
            </div>

            <h3
                class="text-xl md:text-2xl font-bold font-secondary text-tertiary group-hover:text-tertiary/80 transition-colors mb-2"
            >
                {data.data.title}
            </h3>

            <p
                class="font-primary text-base text-tertiary/80 mb-4 line-clamp-3"
            >
                {excerpt}
            </p>

            {
                data.data.tags && data.data.tags.length > 0 && (
                    <div class="flex flex-nowrap md:flex-wrap gap-2 overflow-x-auto md:overflow-visible pb-2 md:pb-0 mb-4">
                        {data.data.tags.map((tag: string) => (
                            <span class="badge rounded-none bg-[#EBE6D2] border-none text-[#003421] whitespace-nowrap">
                                {tag}
                            </span>
                        ))}
                    </div>
                )
            }

            <div class="mt-auto">
                <span
                    class="inline-flex items-center gap-1 text-sm font-primary text-tertiary font-semibold group-hover:underline"
                >
                    {tl("news.seemore")}
                    <Icon
                        name="ph:arrow-right"
                        class="transform group-hover:translate-x-1 transition-transform"
                    />
                </span>
            </div>
        </div>
    </article>
</a>