---
import translate from '$i18n/translate';
import tComponent from '$i18n/translations/components/newsIndex';
import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath';
import { getDate, getHref } from '$lib/newsUtils';
import type { CollectionEntry } from 'astro:content';

interface Props {
  headingLevel: 'h1' | 'h2' | 'h3' | 'h4';
  newsItem: CollectionEntry<'news'>;
}

const { headingLevel, newsItem } = Astro.props;
const locale = getLocaleFromPathOrThrow(Astro.url.pathname);
const t = translate(locale);

const publicationDate = getDate(newsItem);
---

<a class="news-index__item group-hover" href={getHref(newsItem)}>
  <Fragment
    set:html={`
    <${headingLevel}>${newsItem.data.title}</${headingLevel}>
  `}
  />
  <p>{newsItem.data.summary}</p>
  <time datetime={publicationDate?.toISOString()}>
    {
      publicationDate?.toLocaleDateString('en-GB', {
        day: 'numeric',
        month: 'short',
        year: 'numeric',
      })
    }
  </time>
  <p class="link">{t(tComponent, { key: 'read-article' })}</p>
</a>