"use client"
import { useState } from "react";
import { SectionHeader } from "../general/SectionHeader";
import { NewsItem } from "./NewsItem";
import styles from "./newsList.module.scss";
import { NewsFragment } from "@/lib/news";
import { SectionFooter } from "../general/SectionFooter";

export const NewsList = ({
  news,
  heading,
  featured
}: {
  news: NewsFragment[];
  heading?: string;
  featured?: boolean;
}) => {
  const [limit, setLimit] = useState(featured ? 4 : 17);
  function increaseLimit() {
    setLimit(limit + 16);
  }

  return (
    <section className={styles.newsWrapper}>
      {heading && (
        <SectionHeader heading={heading} link="/aktuelt" linkText="Se flere artikler" />
      )}
      <ul className={`${styles.newsList} ${featured && styles.featured}`}>
        {news.slice(0, limit).map((singleNews) => (
          <NewsItem key={singleNews.id} news={singleNews} />
        ))}
      </ul>
      {!featured && limit && news.length > limit && (
        <div className={styles.showMore}>
          <button onClick={increaseLimit}>
            <span>Last inn flere artikler</span>
          </button>
        </div>
      )}
      {heading && (
        <SectionFooter link="/aktuelt" linkText="Se flere artikler" />
      )}
    </section>
  );
};