import "./NewsSection.scss";
import Image from "next/image";
import Link from "next/link";
import { getNews } from "./newsSectionStore";
import arrow_icon from "./icons/arrow-right.svg";
import NewsCard from "@/entities/NewsCard/NewsCard";
import Typography from "@/shared/ui/components/Typography/Typography";

const NewsSection = async () => {
  const news = await getNews();
  return (
    <section className="news-section">
      <Typography element="h3">Новости</Typography>
      <ul className="news-section__list">
        {news?.map((article) => (
          <li key={article.id} className="news-section__card">
            <NewsCard
              id={article.id}
              title={article.title}
              image={article.image}
              description={article.description}
              date={article.created_at}
            />
          </li>
        ))}
      </ul>
      <Link href="/news" className="news-section__read-more-btn">
        Читать
        <Image src={arrow_icon} alt="Arrow Right Icon" />
      </Link>
    </section>
  );
};

export default NewsSection;