"use client";
import { Button, Input, ScrollShadow } from "@nextui-org/react";
import React from "react";
import Link from "next/link";

export default function PPIDSidebar() {
  return (
    <div className="bg-white text-black p-1 md:p-2 lg:p-4 space-y-4">
      <div className="flex justify-center">
        <Link href="/portal-ppid/e-ppid-satker">
          <img src="/e-ppid-satker.png" alt="satker" className="" />
        </Link>
      </div>
      <div className="flex justify-center">
        <Link href="/portal-ppid/e-ppid-polda">
          <img src="/e-ppid-polda.png" alt="satker" className="" />
        </Link>
      </div>
      <div className="flex justify-center">
        <Link href="portal-ppid/layanan-informasi/registrasi-permohonan">
          <img src="/e-ppid-permohonan-informasi.png" alt="permohonan" />
        </Link>
      </div>
      <div className="bg-[#161616] text-white p-3 rounded-lg flex w-full flex-col items-center space-y-2">
        <div>Permohonan Informasi</div>
        <div className="w-full">
          <Input
            variant="flat"
            size="sm"
            type="name"
            label="Nama Pengguna"
            className="w-full"
          />
        </div>
        <div className="w-full">
          <Input
            variant="flat"
            size="sm"
            type="password"
            label="Password"
            className="w-full"
          />
        </div>
        <div className="text-xs text-right text-[#DD8306] w-full">
          Lupa Password?
        </div>
        <div className="w-full">
          <Link href="portal-ppid/layanan-informasi/permohonan-informasi">
            <Button size="sm" className="bg-[#DD8306] w-full font-semibold">
              Masuk
            </Button>
          </Link>
        </div>
        <div className="w-full">
          <Link href="portal-ppid/layanan-informasi/registrasi-permohonan">
            <Button
              href="portal-ppid/layanan-informasi/registrasi-permohonan"
              size="sm"
              className=" w-full bg-white text-[#DD8306] font-bold"
            >
              Register
            </Button>
          </Link>
        </div>
      </div>
      {/* <div>
                <GPRKominfo />
            </div> */}
      {/* <div>
                <div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-3'>
                    Media Update
                </div>
                <div className='h-[360px] p-2 bg-[#020101] text-white rounded-md border-2 border-white'>
                    <ScrollShadow hideScrollBar className=" h-[343px]">
                        <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>
            </div> */}
      <div>
        <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
          Publikasi
          <div className="flex flex-col gap-3 pt-3">
            <img src="/publikasi1.png" alt="publikasi" />
            <img src="/publikasi2.png" alt="publikasi" />
            <img src="/publikasi3.png" alt="publikasi" />
            <img src="/publikasi4.png" alt="publikasi" />
            {/* <img src="/publikasi5.png" alt="publikasi" /> */}
            <img src="/publikasi6.png" alt="publikasi" />
            <img src="/publikasi8.png" alt="publikasi" className="px-1" />
          </div>
        </div>
      </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 mt-5 mx-10">
            <img src="/humas1.png" alt="humas-polri" />
            <img src="/humas2.png" alt="humas-polri" />
            {/* <img src="/humas3.png" alt="humas-polri" /> */}
            <img src="/humas4.png" alt="humas-polri" />
          </div>
        </div>
      </div>
    </div>
  );
}