import "./NewsSection.scss";
import Image from "next/image";
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";
import { Link } from "@/shared/config/navigation";
import { getTranslations } from "next-intl/server";

const NewsSection = async () => {
  const tHome = await getTranslations("home");
  const tGeneral = await getTranslations("general");

  const news = await getNews();
  return (
    <section className="news-section">
      <Typography element="h3">{tGeneral("news")}</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">
        {tHome("read_more")}
        <Image src={arrow_icon} alt="Arrow Right Icon" />
      </Link>
    </section>
  );
};

export default NewsSection;