"use client";

import { Skeleton } from "@/components/ui/skeleton";
import { getHeroData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import Image from "next/image";
import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react";

const RegionalNews = () => {
  const [isLoading, setIsLoading] = useState<any>(true);
  const params = useParams();
  const locale = params?.locale;
  const [heroData, setHeroData] = useState<any>();

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    async function fetchCategories() {
      const url = "https://netidhub.com/api/csrf";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return data; // Menampilkan data yang diterima dari API
      } catch (error) {
        console.error("Fetch error: ", error);
      }
    }

    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getHeroData();
    console.log(response);
    setHeroData(response?.data?.data?.content);
  };

  return (
    <>
      <div className="my-5 px-4 lg:px-28 gap-3">
        <div className="bg-[#c03724] rounded-md p-3 w-fit">
          <p className="text-white font-semibold">Berita Wilayah</p>
        </div>
      </div>
      <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
        {isLoading ? (
          <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
            <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
            <div className="space-y-2">
              <Skeleton className="h-4 w-[250px]" />
              <Skeleton className="h-4 w-[200px]" />
            </div>
          </div>
        ) : (
          <div className="w-full lg:w-2/3 lg:h-full">
            {heroData?.length > 0 && (
              <div className="flex flex-col gap-3">
                <Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
                <h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
                <div className="flex flex-row gap-3">
                  <p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
                  <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
                    {formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                      <path
                        fill="currentColor"
                        d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                      />
                    </svg>{" "}
                    {heroData[0]?.clickCount}{" "}
                  </p>
                </div>
                <p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero
                  veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe
                  atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas
                  veritatis deserunt itaque illum alias. Assumenda deleniti similique id.
                </p>
              </div>
            )}
          </div>
        )}

        {isLoading ? (
          <div className="flex flex-col">
            <div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
              <Skeleton className="h-[73px] w-16 rounded-md" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
            <div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
              <Skeleton className="h-[73px] w-16 rounded-md" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
            <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
              <Skeleton className="h-[73px] w-16 rounded-md" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
            <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
              <Skeleton className="h-[73px] w-16 rounded-md" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
            <div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
              <Skeleton className="h-[73px] w-16 rounded-md" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
          </div>
        ) : (
          <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
            {heroData?.map((item: any) => (
              <div className="flex gap-3 flex-col lg:w-full">
                {/* <div className="flex-shrink-0 rounded-lg">
                  <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
                </div> */}
                <div className="w-[280px] lg:w-auto flex flex-col">
                  <h3 className="font-bold text-lg">{item?.title}</h3>
                  <div className="flex flex-row gap-5">
                    <p className="text-[#c03724] text-sm">{item?.categoryName}</p>
                    <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
                      {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                        <path
                          fill="currentColor"
                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                        />
                      </svg>{" "}
                      {item?.clickCount}{" "}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </>
  );
};

export default RegionalNews;