"use client";
import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
import React, { useState } from "react";
import { EyeIcon } from "../icons";
import Image from "next/image";
import Link from "next/link";

export default function SidebarNav() {
  const [article, setArticle] = useState<any>([]);
  const [selectedTab, setSelectedTab] = useState("media");

  return (
    <>
      <div className="space-y-4 px-5">
        <div className="text-[20px] flex flex-row gap-10">
          <a
            onClick={() => setSelectedTab("media")}
            className={
              selectedTab === "media"
                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
                : "text-slate-300 cursor-pointer py-2"
            }
          >
            Media Update
          </a>
          <a
            onClick={() => setSelectedTab("video")}
            className={
              selectedTab === "video"
                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
                : "text-slate-300 cursor-pointer py-2"
            }
          >
            Video Virtual
          </a>
        </div>
        {selectedTab === "media" ? (
          <div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
            <ScrollShadow hideScrollBar className=" h-[345px]">
              <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>
              <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>
            <Button
              className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
              radius="none"
            >
              Lihat Semua
            </Button>
          </div>
        ) : (
          <div className="w-full">
            <iframe
              width="100%"
              height="410"
              src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
              title="YouTube video player"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
            ></iframe>
          </div>
        )}
        <p className="text-xl border-b-3 border-red-500 w-fit py-2">
          Pelayanan Informasi Publik
        </p>
        <img src="pelayanan-informasi-publik.png" className="w-full" />
        {/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600 ">
          SERTIFIKAT ISO 9001:2015
        </div>
        <div className="h-[370px]   text-white rounded-md">
          <Image
            height={200}
            width={380}
            src="/sertifikat.png"
            alt="publikasi"
          />
        </div> */}

        {/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
          Publikasi
          <div className="flex flex-col gap-3 pt-3">
            <Image
              height={200}
              width={400}
              src="/publikasi1.png"
              alt="publikasi"
            />
            <Image
              height={200}
              width={400}
              src="/publikasi2.png"
              alt="publikasi"
            />
            <Link
              href="https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf"
              target="_blank"
            >
              <Image
                height={200}
                width={400}
                src="/publikasi3.png"
                alt="publikasi"
              />
            </Link>
            <Link href="https://lpse.polri.go.id/eproc4" target="_blank">
              <Image
                height={200}
                width={400}
                src="/publikasi4.png"
                alt="publikasi"
              />
            </Link>
            <Image
              height={200}
              width={400}
              src="/publikasi5.png"
              alt="publikasi"
            />
            <Image
              height={200}
              width={400}
              src="/publikasi6.png"
              alt="publikasi"
            />
            <Link href="https://tribratanews.polri.go.id/" target="_blank">
              <Image
                height={200}
                width={400}
                src="/publikasi7.png"
                alt="publikasi"
              />
            </Link>
          </div>
        </div> */}
        {/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
          Channel Humas Polri
          <div className="flex flex-col gap-3  m-10">
            <Link
              href="https://portal.humas.polri.go.id/library"
              target="_blank"
            >
              <Image
                height={100}
                width={300}
                src="/portal-humas1.png"
                alt="humas-polri"
              />
            </Link>
            <Link href="https://mediahub.polri.go.id/" target="_blank">
              <Image
                height={100}
                width={300}
                src="/humas1.png"
                alt="humas-polri"
              />
            </Link>
            <Link href="https://spit.humas.polri.go.id/" target="_blank">
              <Image
                height={100}
                width={300}
                src="/humas2.png"
                alt="humas-polri"
              />
            </Link>
            <Link href="https://tvradio.polri.go.id/" target="_blank">
              <Image
                height={100}
                width={300}
                src="/humas3.png"
                alt="humas-polri"
              />
            </Link>
            <Link
              href="https://tribratanews.polri.go.id/"
              target="_blank"
              className="border-2 rounded-md shadow-sm"
            >
              <Image
                height={100}
                width={300}
                src="/humas4.png"
                alt="humas-polri"
              />
            </Link>
            <Link
              href="https://inp.polri.go.id/"
              target="_blank"
              className="border-2 rounded-md shadow-sm px-2"
            >
              <Image
                height={100}
                width={300}
                src="/humas5.png"
                alt="humas-polri"
              />
            </Link>
          </div>
        </div> */}
      </div>
      <p className="text-xl border-b-3 border-red-500 py-2 w-fit mx-5">
        {" "}
        Info Eksternal
      </p>
      <div className="flex flex-col mt-3 w-full px-5 gap-3">
        <div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md">
          <img src="/eksternal1.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-3">
            <Link href="https://www.bps.go.id/id/news" target="_blank">
              Berita BPS
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Berita terbaru dari Badan Pusat Statistika Indonesia
          </p>
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
            <Link href="https://www.bps.go.id/id/publication" target="_blank">
              Pengumuman BPS
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1s">
            Pengumuman terbaru dari Badan Pusat Statistika Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal2.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link
              href="https://www.kpu.go.id/berita/104/berita-terkini"
              target="_blank"
            >
              Berita KPU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Berita terbaru dari Komisi Pemilihan Umum Indonesia
          </p>
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
            <Link
              href="https://www.kpu.go.id/berita/11/pengumumanse"
              target="_blank"
            >
              Pengumuman KPU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1s">
            Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal3.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link href="https://www.bawaslu.go.id/" target="_blank">
              Berita BAWASLU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia
          </p>
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
            <Link
              href="https://www.bawaslu.go.id/id/pengumuman"
              target="_blank"
            >
              Pengumuman BAWASLU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1s">
            Pengumuman terbaru dari Badan Pusat Statistika Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal4.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link href="https://www.kpai.go.id/" target="_blank">
              Info KPAI
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal5.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link href="https://www.komnasperempuan.go.id/" target="_blank">
              INFO KOMNAS PEREMPUAN
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Info dan Berita terbaru dari Komnas Perempuan Indonesia
          </p>
        </div>
      </div>
    </>
  );
}