import styles from "./newsItem.module.scss";
import { Image } from "@/components/general/Image";
import { NewsFragment } from "@/lib/news";
import { formatDate } from "@/lib/date";
import Link from "next/link";

export const NewsItem = ({ news }: { news: NewsFragment }) => {
  const featuredImage: any = news.featuredImage;

  return (
    <li className={`${styles.newsItem} linkItem`}>
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={featuredImage.width}
            height={featuredImage.height}
            sizes="(max-width: 600px) 25vw, 55vw"
          />
        )}
      </div>
      <div className={styles.text}>
        {news.firstPublishedAt && (
          <p className={styles.date}>
            {formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
          </p>
        )}
        <h2 className={styles.title}>{news.title}</h2>
        <p className={styles.lead}>{news.excerpt}</p>
      </div>
      <Link href={`/aktuelt/${news.slug}`} className="hiddenLink">
        Les artikkelen: {news.title}
      </Link>
    </li>
  );
};