import Link from "next/link";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getApiPageList } from "@/store/pageAll";

export default function Bottom() {
  const [data, setData] = useState();
  const { pageList, pageListStatus } = useSelector((state) => state.pageList);

  const dispatch = useDispatch();
  useEffect(() => {
    if (!pageListStatus && pageList.length == 0) {
      dispatch(getApiPageList());
    }
  }, []);

  useEffect(() => {
    if (pageList.length > 0 && pageListStatus) {
      setData(pageList);
    }
  }, [pageListStatus]);

  return (
    <div className="container mx-auto py-2 flex justify-between flex-col sm:flex-row  ">
      <div className=" flex flex-col  ">
        <strong className="text-white text-sm">
          Dünyadan Son Dakika Haberler, Spor, Dünya, Politika, Sağlık, Forex,
          Kripto, Ekonomi, Emlak.
        </strong>
        <h3 className="text-white text-sm font-thin">
          {`${process.env.BRAND_NAME}: Türkiye'nin en kapsamlı haber sitesi. Son dakika
          haberleri ve en güncel haberler ${process.env.BRAND_NAME}'da.`}
        </h3>
      </div>
      <div className="flex justify-center items-center mt-4 sm:mt-0">
        {data && data.length > 0
          ? data.map((item, key) => (
              <Link
                title={item.title}
                key={key}
                className="text-slate-300 hover:text-slate-100 text-sm ml-3"
                href={`/page/${item.slug}`}
              >
                {item.title}
              </Link>
            ))
          : ""}
      </div>
    </div>
  );
}
