"use client";
import { Button, Card, CardFooter, ScrollShadow } from "@nextui-org/react";
import Image from "next/image";
import { EyeIcon } from "../icons";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";

export default function HeaderNews() {
  const [article, setArticle] = useState();

  useEffect(() => {
    async function getArticle() {
      const response = await getListArticle();
      console.log("res", response?.data?.data);
    }
    getArticle();
  }, []);

  const newsData = [
    {
      id: 1,
      title:
        "Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
      date: "21-07-2023 13:50",
      views: 82,
      imageUrl: "/headernews.png",
    },
    {
      id: 2,
      title:
        "Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
      date: "21-07-2023 13:50",
      views: 82,
      imageUrl: "/headernews.png",
    },
    {
      id: 3,
      title:
        "Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
      date: "21-07-2023 13:50",
      views: 82,
      imageUrl: "/headernews.png",
    },
    {
      id: 4,
      title:
        "Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
      date: "21-07-2023 13:50",
      views: 82,
      imageUrl: "/headernews.png",
    },
    {
      id: 5,
      title:
        "Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
      date: "21-07-2023 13:50",
      views: 82,
      imageUrl: "/headernews.png",
    },
    {
      id: 6,
      title:
        "Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari",
      date: "21-07-2023 13:50",
      views: 82,
      imageUrl: "/headernews.png",
    },
  ];
  return (
    <div className="lg:flex items-center  bg-white gap-3 p-2">
      <div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md">
        <p className="text-lg font-bold h-10 text-center">Berita Terkini</p>
        <ScrollShadow hideScrollBar className=" h-[443px]">
          <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
            <p>
              Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi
              Warganya yang Masih Beraktifitas Pada Malam Hari
            </p>
            <p className="py-[2px]">21-07-2023 13:50</p>
            <p className="flex items-center gap-1">
              <EyeIcon />
              82
            </p>
          </div>
          <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
            <p>
              Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi
              Warganya yang Masih Beraktifitas Pada Malam Hari
            </p>
            <p className="py-[2px]">21-07-2023 13:50</p>
            <p className="flex items-center gap-1">
              <EyeIcon />
              82
            </p>
          </div>
          <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
            <p>
              Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi
              Warganya yang Masih Beraktifitas Pada Malam Hari
            </p>
            <p className="py-[2px]">21-07-2023 13:50</p>
            <p className="flex items-center gap-1">
              <EyeIcon />
              82
            </p>
          </div>
          <div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
            <p>
              Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi
              Warganya yang Masih Beraktifitas Pada Malam Hari
            </p>
            <p className="py-[2px]">21-07-2023 13:50</p>
            <p className="flex items-center gap-1">
              <EyeIcon />
              82
            </p>
          </div>
        </ScrollShadow>
        <div className="m-2">
          <Link href="/news/all">
            <Button
              className="w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none"
              radius="none"
            >
              Lihat Semua
            </Button>
          </Link>
        </div>
      </div>
      <div className="w-auto lg:w-[50%]">
        <div>
          <Swiper
            centeredSlides={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            pagination={{
              clickable: true,
            }}
            navigation={true}
            modules={[Autoplay, Pagination, Navigation]}
            className="mySwiper"
          >
            {newsData.map((newsItem) => (
              <SwiperSlide key={newsItem.id}>
                <Card isFooterBlurred radius="lg" className="border-none">
                  <Image
                    alt="headernews"
                    className="object-cover"
                    height={660}
                    src={newsItem.imageUrl}
                    width={460}
                    layout="responsive"
                  />
                  <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                    <div className="text-white">
                      <Link href={`news/detail/${newsItem.id}`}>
                        <p className="text-left font-semibold">
                          {newsItem.title}
                        </p>
                      </Link>
                      <p className="py-[2px] text-left text-sm">
                        {newsItem.date}
                      </p>
                      <p className="flex items-center gap-1 text-sm">
                        <EyeIcon />
                        {newsItem.views}
                      </p>
                    </div>
                  </CardFooter>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
        {/* <Card
                    isFooterBlurred
                    radius="lg"
                    className="border-none"
                >
                    <Image
                        alt="headernews"
                        className="object-cover"
                        height={660}
                        src="/headernews.png"
                        width={460}
                        layout="responsive"
                    />
                    <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                        <div className='text-white'>
                            <p className='text-left font-semibold'>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                            <p className='py-[2px] text-left text-sm'>21-07-2023 13:50</p>
                            <p className='flex items-center gap-1 text-sm'><EyeIcon />82</p>
                        </div>
                    </CardFooter>
                </Card> */}
      </div>
      <div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black ">
        <GPRKominfo />
        {/* <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
                    <img src="/gprheader.png" alt="gpr" className='w-full' />
                </div>
                <div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                </div>
                <div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
                    <img src="/gprfooter.png" alt="gpr" className='w-full' />
                </div> */}
      </div>
    </div>
  );
}