import Typography from "@/shared/ui/components/Typography/Typography";
import "./News.scss";
import { apiInstance } from "@/shared/config/apiConfig";
import { INewsList } from "@/shared/types/news-type";
import NewsCard from "@/entities/NewsCard/NewsCard";

const News = async () => {
  const getNews = async () => {
    const response = await apiInstance.get<INewsList>("/news/");

    return response.data;
  };

  const data = await getNews();
  return (
    <div className="news page-padding">
      <Typography element="h2">Новости</Typography>

      <ul className="news__list">
        {data.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>
    </div>
  );
};

export default News;