"use client";

import "./NewsSection.scss";
import Image from "next/image";
import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
import image from "./assets/image.jpg";
import arrow_icon from "./icons/arrow-right-icon.svg";
import Link from "next/link";
import { useNewsHome } from "./news-home.store";
import { useEffect } from "react";
import NewsCard from "@/Entities/NewsCard/NewsCard";

const NewsSection = () => {
  const { data, loading, error, getNews } = useNewsHome();

  useEffect(() => {
    getNews();
  }, []);

  return (
    <div className="news-section">
      <SectionHeader>Новости</SectionHeader>

      <ul className="news-section__list">
        {data.map((card) => (
          <li key={card.id} className="news-section__card">
            <NewsCard
              id={card.id}
              title={card.title}
              image={card.image}
              description={card.description}
              date={card.created_at}
            />
          </li>
        ))}
      </ul>
      <Link href="/news" className="news-section__read-more-btn">
        Читать
        <Image src={arrow_icon} alt="Arrow Right Icon" />
      </Link>
    </div>
  );
};

export default NewsSection;
