"use client";
import { BreadcrumbItem, Breadcrumbs, Button, Input } from "@heroui/react";
import Link from "next/link";
import PPIDSidebar from "./PPIDSidebar";
import { SearchIcon } from "@/components/icons";

export default function PPIDSatker() {
  const listSatkerAll = [
    {
      id: 1,
      img: "/assets/satker/siber.svg",
      path: "satuan-kerja/siber",
    },
    {
      id: 2,
      img: "/assets/satker/divkum.svg",
      path: "satuan-kerja/divkum",
    },
    {
      id: 3,
      img: "/assets/satker/puskeu.svg",
      path: "satuan-kerja/puskeu",
    },
    {
      id: 4,
      img: "/assets/satker/ssdm.svg",
      path: "satuan-kerja/ssdm",
    },
    {
      id: 5,
      img: "/assets/satker/itwasum.svg",
      path: "satuan-kerja/itwasum",
    },
    {
      id: 6,
      img: "/assets/satker/stik-ptik.svg",
      path: "satuan-kerja/stik-ptik",
    },
    {
      id: 7,
      img: "/assets/satker/brimob.svg",
      path: "satuan-kerja/brimob",
    },
    {
      id: 8,
      img: "/assets/satker/div-humas.svg",
      path: "satuan-kerja/div-humas",
    },
    {
      id: 9,
      img: "/assets/satker/puslitbang.svg",
      path: "satuan-kerja/puslitbang",
    },
    {
      id: 10,
      img: "/assets/satker/binmas.svg",
      path: "satuan-kerja/binmas",
    },
    {
      id: 11,
      img: "/assets/satker/divtik.svg",
      path: "satuan-kerja/divtik",
    },
    {
      id: 12,
      img: "/assets/satker/spripim.svg",
      path: "satuan-kerja/spripim",
    },
    {
      id: 13,
      img: "/assets/satker/propam.svg",
      path: "satuan-kerja/propam",
    },
    {
      id: 14,
      img: "/assets/satker/baharkam.svg",
      path: "satuan-kerja/sabhara-baharkam",
    },
    {
      id: 15,
      img: "/assets/satker/pusdokkes.svg",
      path: "satuan-kerja/pusdokkes",
    },
    {
      id: 16,
      img: "/assets/satker/baharkam2.svg",
      path: "satuan-kerja/baharkam",
    },
    {
      id: 17,
      img: "/assets/satker/polairud.svg",
      path: "satuan-kerja/polairud",
    },
    {
      id: 18,
      img: "/assets/satker/polair.svg",
      path: "satuan-kerja/polair",
    },
    {
      id: 19,
      img: "/assets/satker/poludara.svg",
      path: "satuan-kerja/poludara",
    },
    {
      id: 20,
      img: "/assets/satker/lemdiklat.svg",
      path: "satuan-kerja/lemdiklat",
    },
    {
      id: 21,
      img: "/assets/satker/akpol.svg",
      path: "satuan-kerja/akpol",
    },
    {
      id: 22,
      img: "/assets/satker/korlantas.svg",
      path: "satuan-kerja/korlantas",
    },
    {
      id: 23,
      img: "/assets/satker/pusinafis.svg",
      path: "satuan-kerja/pusinafis",
    },
    {
      id: 24,
      img: "/assets/satker/pusjarah.svg",
      path: "satuan-kerja/pusjarah",
    },
    {
      id: 25,
      img: "/assets/satker/pusiknas.svg",
      path: "satuan-kerja/pusiknas",
    },
    {
      id: 26,
      img: "/assets/satker/slog.svg",
      path: "satuan-kerja/slog",
    },
    {
      id: 27,
      img: "/assets/satker/baintelkam.svg",
      path: "satuan-kerja/baintelkam",
    },
    {
      id: 28,
      img: "/assets/satker/bareskrim.svg",
      path: "satuan-kerja/bareskrim",
    },
    {
      id: 29,
      img: "/assets/satker/divhubinter.svg",
      path: "satuan-kerja/div-hubinter",
    },
    {
      id: 30,
      img: "/assets/satker/setum.svg",
      path: "satuan-kerja/setum",
    },
    {
      id: 31,
      img: "/assets/satker/puslabfor.svg",
      path: "satuan-kerja/puslabfor",
    },
    {
      id: 32,
      img: "/assets/satker/densus.svg",
      path: "satuan-kerja/densus88",
    },
    {
      id: 33,
      img: "/assets/satker/sahli-kapolri.svg",
      path: "satuan-kerja/sahli-kapolri",
    },
    {
      id: 34,
      img: "/assets/satker/sops.svg",
      path: "satuan-kerja/sops",
    },
    {
      id: 35,
      img: "/assets/satker/srena.svg",
      path: "satuan-kerja/srena",
    },
    {
      id: 36,
      img: "/assets/satker/sespim.svg",
      path: "satuan-kerja/sespim",
    },
    {
      id: 37,
      img: "/assets/satker/setupa.svg",
      path: "satuan-kerja/setupa",
    },
  ];

  const searchInput = (
    <Input
      aria-label="Search"
      className="w-full"
      classNames={{
        inputWrapper: "bg-white hover:!bg-gray-100",
        input: "text-sm",
        innerWrapper: "text-red-500",
      }}
      labelPlacement="outside"
      placeholder="Search..."
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      endContent={
        <Button size="sm" className="bg-[#DD8306] font-semibold">
          Cari
        </Button>
      }
      type="search"
    />
  );

  const filters = [
    { label: "Title", value: "title" },
    { label: "Date", value: "date" },
    { label: "Created At", value: "createdAt" },
  ];
  return (
    <div className="md:flex ">
      <div className="w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] px-2  text-black">
        <div className="p-1 md:p-5 lg:p-8">
          <div className="font-bold text-xl">Satuan Kerja</div>
          <div className="pt-2 pb-7">
            <Breadcrumbs color="primary">
              <BreadcrumbItem>
                <Link href="/portal-ppid">Beranda</Link>
              </BreadcrumbItem>
              <BreadcrumbItem>Satuan Kerja</BreadcrumbItem>
            </Breadcrumbs>
          </div>
          <div className="pt-4 space-y- border border-[#DD8306] rounded-lg bg-[#FFFFFF]">
            <div className="text-center text-xl font-semibold underline underline-offset-8 decoration-red-600">
              Satuan Kerja
            </div>
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 pt-8  gap-3">
              {listSatkerAll.map((data) => (
                <div className="flex justify-center" key={data.id}>
                  <Link href={data.path}>
                    <img src={data.img} alt="logo" />
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div className="w-auto md:w-1/3 lg:w-[25%]">
        <PPIDSidebar />
      </div>
    </div>
  );
}