import React, { useRef } from "react";
import "../Section10/section10.css";
import axios from "axios";
import { useState, useEffect } from "react";
import baseUrl from "../../../array/base/config";
import { NavLink } from "react-router-dom";
/**
 * Represents Section10 component.
 * @module Home/Section10
 * @returns {JSX.Element} The Section10 component.
 */
const Section10 = () => {
  /**
   * State for storing news data
   * @type {string}
   * @memberof module:Home/Section10
   * @name newsList
   */
  const [newsList, setNewsList] = useState([]);
  useEffect(() => {
    apicall();
  }, []);
  /**
   * Fetches news data from the API and updates the state.
   * @function apicall
   * @async
   * @memberof module:Home/Section10
   */
  const apicall = () => {
    axios({
      method: "get",
      url: `${baseUrl}/api/news/`,
    })
      .then((res) => {
        setNewsList(res.data.data.results);
      })
      .catch((err) => console.log(err));
  };

  return (
    <>
      {newsList.length > 0 ? (
        <div className="section_10_container relative" id="news">
          <div className="section_10_container_heading">
            <h1>Latest News</h1>
          </div>
          <div className="section_10_container_news_body ">
            {newsList?.length >= 4 ? (
              <div className="view_more_news_wrapper">
                <NavLink to="/news">
                  <div className="readmore_list_view">
                    <p>View more</p>
                    <ion-icon
                      className="custom_icon"
                      name="eye-outline"
                    ></ion-icon>
                  </div>
                </NavLink>
              </div>
            ) : (
              ""
            )}

            <div className="section_10_container_news_div ">
              {newsList
                .filter((item, i) => i <= 3)
                .map((dat, i) => {
                  return (
                    <div
                      className="section_10_container_individual_news_card"
                      key={i}
                    >
                      <NavLink to={`/single/news/${dat.id}`}>
                        <div className="section_10_container_news_wrapper"></div>
                      </NavLink>
                      <div className="section_10_container_news_card_body">
                        <div className="section_10_container_news_thumbnail">
                          <img src={dat?.image} alt="" />
                        </div>
                      </div>
                      <div className="section_10_container_news_card_footer">
                        <div className="section_10_container_news_card_footer_content">
                          <h4>{dat?.title}</h4>
                          <div className="section_10_container_news_start_end_div">
                            <div className="section_10_container_start_date">
                              <small>Published at:</small>
                              <p>{dat?.created_at}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
};

export default Section10;