Untitled

'use client';

import GlobalLoading from '@/components/Global/GlobalLoading';
import { xoomBackendUrl } from '@/lib/axios/getAxios';
import moment from 'moment';
import Image from 'next/image';
import Link from 'next/link';
import { useQuery } from 'react-query';


export default function NewsHome() {
  // Fetch all News Data
  const {
    isLoading: isLoadingNews,
    data: newsData,
    refetch: refetchNews,
  } = useQuery(
    `news-data`,
    async () => {
      const response = await xoomBackendUrl.get(`/api/news`);
      if (response.status === 200) {
        // setIsRefetching(false);
        return response.data?.data;
      } else {
        throw new Error('Failed to fetch all Leagues data');
      }
    },
    {
      cacheTime: 0,
    }
  );

  if (isLoadingNews) {
    return <GlobalLoading />;
  }

  if (!newsData || newsData.length === 0) {
    return (
      <div className="bg-black h-[250px] grid grid-cols-1 content-center -skew-y-[0.5deg]">
        <div className="p-2 font-medium text-center text-gray-300 skew-y-[0.5deg]">
          No news found at the moment. Stay tuned for updates!
        </div>
      </div>
    );
  }

  const truncate = (input) =>
    input?.length > 70 ? `${input.substring(0, 70)}...` : input;


  return (
    <div className='-mt-4 sm:-mt-0 news_section'>

      <Link href={`/news/${newsData[0]?.slug}`}>
        <div className="bg-warning h-[410px] sm:h-[250px] grid grid-cols-1 content-center -skew-y-[2deg] sm:-skew-y-[0.5deg]">
          <div className="flex flex-col sm:grid grid-cols-2 gap-6 bg-none rounded-none text-black sm:text-white sm:px-10 py-10">
            <div className="w-full sm:w-72 h-full skew-y-[2deg] sm:skew-y-[0.5deg] mt-[64px] sm:mt-0 sm:py-[4px] relative ">
              <Image
                src={newsData[0]?.image}
                alt="HighlightImg"
                width={100}
                height={100}
                className="w-full sm:h-44 md:w-72 p-0 sm:p-[7px]"
                sizes="100vw"
              />

              <div className="absolute -bottom-3 sm:bottom-0 right-0 me-7 ">
                <h2 className="animate-pulse text-white bg-red-500 px-2 font-bold">
                  EXCLUSIVE
                </h2>
              </div>
            </div>

            <div className="my-12 pb-4 sm:my-8 -mt-2 ml-2 sm:ml-10 skew-y-[2deg] sm:skew-y-[0.5deg]">
              <h2 className="card-title text-sm"> {truncate(newsData[0]?.title)} </h2>
              <small className='text-[11px] font-normal mt-3 sm:mt-0'>{moment(newsData[0]?.publish_date, 'YYYY-MM-DD HH:mm').format('ddd, DD MMM YYYY')}</small>
            </div>
          </div>
        </div>
      </Link>

      <div className="py-2 mt-8 ">
        <h4 className="font-semibold ml-2">TOP STORIES</h4>
        <div className=" sm:grid sm:grid-cols-2 sm:gap-7 ml-2 sm:ml-0">
          {newsData.slice(1).map((news) => (
            <div key={news._id}>
              <Link href={`/news/${news?.slug}`}>
                <div className="card rounded-none flex flex-row sm:flex-col">
                  <div className="bg-black sm:w-full -skew-y-[3deg] sm:-skew-y-[0.5deg] mb-7 sm:mb-0 ">
                    <figure>
                      <Image
                        src={news?.image}
                        alt="HighlightImg"
                        width={100}
                        height={100}
                        className="max-w-fit sm:w-72 sm:h-44 skew-y-[0.5deg] py-[4px]"
                        sizes="sm:100vw"
                      />
                    </figure>
                  </div>

                  <div className="flex items-center mx-5 sm:mx-0 -mt-5 sm:-mt-0">
                    <div className="ml-0">
                      <h2 className="text-sm font-semibold my-0 sm:my-2  md:ps-5  lg:ps-0">
                        {news?.title.length > 50
                          ? news?.title.slice(0, 50)
                          : news?.title}
                        ...
                      </h2>
                      <small className='md:ps-5 lg:ps-0 text-[11px] text-start font-normal mt-0 sm:mt-0 text-base-00'>
                        {moment(news?.publish_date, 'YYYY-MM-DD HH:mm').format('ddd, DD MMM YYYY')}
                      </small>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}