"use client";

import "./NewsList.scss";
import NewsCard from "@/entities/NewsCard/NewsCard";
import { useNewsStore } from "./newsStore";
import { useEffect, useState } from "react";
import Pagination from "@/features/Pagination/Pagination";

interface INewsListProps {
  searchParams: {
    ["страница-новостей"]: string;
  };
}

const NewsList: React.FC<INewsListProps> = ({
  searchParams,
}: INewsListProps) => {
  const [activePage, setActivePage] = useState<number>(
    +searchParams["страница-новостей"] || 1
  );
  const { data: news, getNews, isLoading, error } = useNewsStore();

  useEffect(() => {
    getNews(activePage);
  }, []);
  return (
    <div className="news-list">
      <ul>
        {news.results.map((news) => (
          <li key={news.id}>
            <NewsCard
              id={news.id}
              title={news.title}
              description={news.description}
              image={news.image}
              date={news.created_at}
            />
          </li>
        ))}
      </ul>
      <Pagination
        activePage={activePage}
        setActivePage={setActivePage}
        prev={news.previous}
        next={news.next}
        count={news.count as number}
        current_count={news.results.length}
        limit={20}
      />
    </div>
  );
};

export default NewsList;