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

export default function PPIDPolda() {
  const listPoldaAll = [
    {
      id: 1,
      img: "/assets/polda/polda-metro-jaya.svg",
      title: "Polda Metro Jaya",
      path: "polda/polda-metro-jaya",
    },
    {
      id: 2,
      img: "/assets/polda/polda-jawa-barat.svg",
      title: "Polda Jawa Barat",
      path: "polda/polda-jawa-barat",
    },
    {
      id: 3,
      img: "/assets/polda/polda-banten.svg",
      title: "Polda Banten",
      path: "polda/polda-banten",
    },
    {
      id: 4,
      img: "/assets/polda/polda-jateng.svg",
      title: "Polda Jawa Tengah",
      path: "polda/polda-jateng",
    },
    {
      id: 5,
      img: "/assets/polda/polda-diy.svg",
      title: "Polda D.I Yogyakarta",
      path: "polda/polda-diy",
    },
    {
      id: 6,
      img: "/assets/polda/polda-jatim.svg",
      title: "Polda Jawa Timur",
      path: "polda/polda-jatim",
    },
    {
      id: 7,
      img: "/assets/polda/polda-aceh.svg",
      title: "Polda Aceh",
      path: "polda/polda-aceh",
    },
    {
      id: 8,
      img: "/assets/polda/polda-sumut.svg",
      title: "Polda Sumatra Utara",
      path: "polda/polda-sumut",
    },
    {
      id: 9,
      img: "/assets/polda/polda-sumbar.svg",
      title: "Polda Sumatra Barat",
      path: "polda/polda-sumbar",
    },
    {
      id: 10,
      img: "/assets/polda/polda-riau.svg",
      title: "Polda Riau",
      path: "polda/polda-riau",
    },
    {
      id: 11,
      img: "/assets/polda/polda-kepri.svg",
      title: "Polda Kep.Riau",
      path: "polda/polda-kepri",
    },
    {
      id: 12,
      img: "/assets/polda/polda-jambi.svg",
      title: "Polda Jambi",
      path: "polda/polda-jambi",
    },
    {
      id: 13,
      img: "/assets/polda/polda-sumsel.svg",
      title: "Polda Sumatra Selatan",
      path: "polda/polda-sumsel",
    },
    {
      id: 14,
      img: "/assets/polda/polda-babel.svg",
      title: "Polda Kep.Bangka Belitung",
      path: "polda/polda-babel",
    },
    {
      id: 15,
      img: "/assets/polda/polda-bengkulu.svg",
      title: "Polda Bengkulu",
      path: "polda/polda-bengkulu",
    },
    {
      id: 16,
      img: "/assets/polda/polda-lampung.svg",
      title: "Polda Lampung",
      path: "polda/polda-lampung",
    },
    {
      id: 17,
      img: "/assets/polda/polda-ntb.svg",
      title: "Polda Nusa Tenggara Barat",
      path: "polda/polda-ntb",
    },
    {
      id: 18,
      img: "/assets/polda/polda-ntt.svg",
      title: "Polda Nusa Tenggara Timur",
      path: "polda/polda-ntt",
    },
    {
      id: 19,
      img: "/assets/polda/polda-bali.svg",
      title: "Polda Bali",
      path: "polda/polda-bali",
    },
    {
      id: 20,
      img: "/assets/polda/polda-kalbar.svg",
      title: "Polda Kalimantan Barat",
      path: "polda/polda-kalbar",
    },
    {
      id: 21,
      img: "/assets/polda/polda-kalteng.svg",
      title: "Polda Kalimantan Tengah",
      path: "polda/polda-kalteng",
    },
    {
      id: 22,
      img: "/assets/polda/polda-kalsel.svg",
      title: "Polda Kalimantan Selatan",
      path: "polda/polda-kalsel",
    },
    {
      id: 23,
      img: "/assets/polda/polda-kaltim.svg",
      title: "Polda Kalimantan Timur",
      path: "polda/polda-kaltim",
    },
    {
      id: 24,
      img: "/assets/polda/polda-kalut.svg",
      title: "Polda Kalimantan Utara",
      path: "polda/polda-kalut",
    },
    {
      id: 25,
      img: "/assets/polda/polda-sulteng.svg",
      title: "Polda Sulawesi Tengah",
      path: "polda/polda-sulteng",
    },
    {
      id: 26,
      img: "/assets/polda/polda-sulawesi-utara.svg",
      title: "Polda Sulawesi Utara",
      path: "polda/polda-sulawesi-utara",
    },
    {
      id: 27,
      img: "/assets/polda/polda-gorontalo.svg",
      title: "Polda Gorontalo",
      path: "polda/polda-gorontalo",
    },
    {
      id: 28,
      img: "/assets/polda/polda-sulbar.svg",
      title: "Polda Sulawesi Barat",
      path: "polda/polda-sulbar",
    },
    {
      id: 29,
      img: "/assets/polda/polda-sulsel.svg",
      title: "Polda Sulawesi Selatan",
      path: "polda/polda-sulsel",
    },
    {
      id: 30,
      img: "/assets/polda/polda-sultenggara.svg",
      title: "Polda Sulawesi Tenggara",
      path: "polda/polda-sultenggara",
    },
    {
      id: 31,
      img: "/assets/polda/polda-malut.svg",
      title: "Polda Maluku Utara",
      path: "polda/polda-malut",
    },
    {
      id: 32,
      img: "/assets/polda/polda-maluku.svg",
      title: "Polda Maluku",
      path: "polda/polda-maluku",
    },
    {
      id: 33,
      img: "/assets/polda/polda-papuabarat.svg",
      title: "Polda Papua Barat",
      path: "polda/polda-papuabarat",
    },
    {
      id: 34,
      img: "/assets/polda/polda-papua.svg",
      title: "Polda Papua",
      path: "polda/polda-papua",
    },
  ];
  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">E-PPID POLDA</div>
          <div className="pt-2 pb-7">
            <Breadcrumbs color="primary">
              <BreadcrumbItem>
                <Link href="/portal-ppid">Beranda</Link>
              </BreadcrumbItem>
              <BreadcrumbItem>E-PPID Polda</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">
              E-PPID POLDA
            </div>
            <div className="flex flex-wrap items-center justify-center pt-8  gap-4">
              {listPoldaAll.map((polda) => (
                <div
                  className="flex justify-center text-center w-[140px] h-[125px]  items-center pt-2 "
                  key={polda.id}
                >
                  <Link
                    href={polda.path}
                    className="flex flex-col items-center text-sm font-medium gap-1"
                  >
                    <Image height={59} src={polda.img} alt="logo" />
                    <p>{polda.title}</p>
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div className="w-auto md:w-1/3 lg:w-[25%]">
        <PPIDSidebar />
      </div>
    </div>
  );
}