'use client'
import { BreadcrumbItem, Breadcrumbs, Button, Input } from "@nextui-org/react";
import Link from "next/link";
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
import { SearchIcon } from '../icons';


export default function PPIDSatker() {

    const listSatkerAll = [
        {
            id: 1,
            img: "/assets/polda/polda-metro.svg",
            title: "Polda Metro Jaya",
            path: 'polda/polda-metro-jaya'
        },
        {
            id: 2,
            img: "/assets/polda/polda-jabar.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-daerah-istimewa-yogyakarta'
        },
        {
            id: 6,
            img: "/assets/polda/polda-jatim.svg",
            title: "Polda Jawa Timur",
            path: 'polda/polda-jawa-timur'
        },
        {
            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-sumatra-utara'
        },
        {
            id: 9,
            img: "/assets/polda/polda-sumbar.svg",
            title: "Polda Sumatra Barat",
            path: 'polda/polda-sumatra-barat'
        },
        {
            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-kepulauan-riau'
        },
        {
            id: 12,
            img: "/assets/polda/polda-jambi.svg",
            title: "Polda Jambi",
            path: 'polda/polda-jambi'
        },
        {
            id: 13,
            img: "/assets/polda/polda-jambi.svg",
            title: "Polda Jambi",
            path: 'polda/polda-jambi'
        },
        {
            id: 14,
            img: "/assets/polda/polda-sumsel.svg",
            title: "Polda Sumatra Selatan",
            path: 'polda/polda-sumatra-selatan'
        },
        {
            id: 15,
            img: "/assets/polda/polda-sumsel.svg",
            title: "Polda Kep.Bangka Belitung",
            path: 'polda/polda-bangka-belitung'
        },
        {
            id: 16,
            img: "/assets/polda/polda-bengkulu.svg",
            title: "Polda Bengkulu",
            path: 'polda/polda-bengkulu'
        },
        {
            id: 17,
            img: "/assets/polda/polda-lampung.svg",
            title: "Polda Lampung",
            path: 'polda/polda-lampung'
        },
        {
            id: 18,
            img: "/assets/polda/polda-ntb.svg",
            title: "Polda Nusa Tenggara Barat",
            path: 'polda/polda-ntb'
        },
        {
            id: 19,
            img: "/assets/polda/polda-ntb.svg",
            title: "Polda Nusa Tenggara Barat",
            path: 'polda/polda-ntb'
        },
        {
            id: 20,
            img: "/assets/polda/polda-ntt.svg",
            title: "Polda Nusa Tenggara Timur",
            path: 'polda/polda-ntt'
        },
        {
            id: 21,
            img: "/assets/polda/polda-bali.svg",
            title: "Polda Bali",
            path: 'polda/polda-bali'
        },
        {
            id: 22,
            img: "/assets/polda/polda-kalbar.svg",
            title: "Polda Kalimantan Barat",
            path: 'polda/polda-kalimantan-barat'
        },
        {
            id: 23,
            img: "/assets/polda/polda-kalteng.svg",
            title: "Polda Kalimantan Tengah",
            path: 'polda/polda-kalimantan-tengah'
        },
        {
            id: 24,
            img: "/assets/polda/polda-kalsel.svg",
            title: "Polda Kalimantan Selatan",
            path: 'polda/polda-kalimantan-selatan'
        },
        {
            id: 25,
            img: "/assets/polda/polda-kaltim.svg",
            title: "Polda Kalimantan Timur",
            path: 'polda/polda-kalimantan-timur'
        },
        {
            id: 26,
            img: "/assets/polda/polda-kalut.svg",
            title: "Polda Kalimantan Utara",
            path: 'polda/polda-kalimantan-utara'
        },
        {
            id: 27,
            img: "/assets/polda/polda-sulteng.svg",
            title: "Polda Sulawesi Tengah",
            path: 'polda/polda-sulawesi-tengah'
        },
        {
            id: 28,
            img: "/assets/polda/polda-sulut.svg",
            title: "Polda Sulawesi Utara",
            path: 'polda/polda-sulawesi-utara'
        },
        {
            id: 29,
            img: "/assets/polda/polda-gorontalo.svg",
            title: "Polda Gorontalo",
            path: 'polda/polda-gorontalo'
        },
        {
            id: 30,
            img: "/assets/polda/polda-sulbar.svg",
            title: "Polda Sulawesi Barat",
            path: 'polda/polda-sulawesi-barat'
        },
        {
            id: 31,
            img: "/assets/polda/polda-sulsel.svg",
            title: "Polda Sulawesi Selatan",
            path: 'polda/polda-sulawesi-selatan'
        },
        {
            id: 32,
            img: "/assets/polda/polda-sultenggara.svg",
            title: "Polda Sulawesi Tenggara",
            path: 'polda/polda-sulawesi-tenggara'
        },
        {
            id: 33,
            img: "/assets/polda/polda-malut.svg",
            title: "Polda Maluku Utara",
            path: 'polda/polda-maluku-utara'
        },
        {
            id: 34,
            img: "/assets/polda/polda-maluku.svg",
            title: "Polda Maluku",
            path: 'polda/polda-maluku'
        },
        {
            id: 35,
            img: "/assets/polda/polda-papuabarat.svg",
            title: "Polda Papua Barat",
            path: 'polda/polda-papua-barat'
        },
        {
            id: 36,
            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'>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">
                            <div className="flex justify-center">
                                <Link href='satuan-kerja/siber'>
                                    <img src="/assets/satker/siber.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/divkum'>
                                    <img src="/assets/satker/divkum.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/puskeu'>
                                    <img src="/assets/satker/puskeu.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/ssdm'>
                                    <img src="/assets/satker/ssdm.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/itwasum'>
                                    <img src="/assets/satker/itwasum.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/stik-ptik'>
                                    <img src="/assets/satker/stik-ptik.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/stik-brimob'>
                                    <img src="/assets/satker/brimob.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/stik-div-humas'>
                                    <img src="/assets/satker/humas.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/stik-puslitbang'>
                                    <img src="/assets/satker/puslitbang.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/binmas'>
                                    <img src="/assets/satker/binmas.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/divtik'>
                                    <img src="/assets/satker/divtik.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/spripim'>
                                    <img src="/assets/satker/spripim.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/div-propam'>
                                    <img src="/assets/satker/propam.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/korps-sabhara-baharkam'>
                                    <img src="/assets/satker/baharkam.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/pusdokkes'>
                                    <img src="/assets/satker/pusdokes.svg" alt="logo" className="h-[89px]" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/baharkam'>
                                    <img src="/assets/satker/baharkam2.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/polairud'>
                                    <img src="/assets/satker/polairud.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/polair'>
                                    <img src="/assets/satker/polair.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/poludara'>
                                    <img src="/assets/satker/poludara.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/lemdiklat'>
                                    <img src="/assets/satker/lemdiklat.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/akpol'>
                                    <img src="/assets/satker/akpol.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/korlantas'>
                                    <img src="/assets/satker/korlantas.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/pusinafis'>
                                    <img src="/assets/satker/pusinafis.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/pusjarah'>
                                    <img src="/assets/satker/pusjarah.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/pusiknas'>
                                    <img src="/assets/satker/pusiknas.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/slog'>
                                    <img src="/assets/satker/slog.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/baintelkam'>
                                    <img src="/assets/satker/baintelkam.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/bareskrim'>
                                    <img src="/assets/satker/bareskrim.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/div-hubinter'>
                                    <img src="/assets/satker/divhubinter.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/setum'>
                                    <img src="/assets/satker/setum.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/puslabfor'>
                                    <img src="/assets/satker/puslabfor.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/densus88'>
                                    <img src="/assets/satker/densus.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/sahli-kapolri'>
                                    <img src="/assets/satker/sahli-kapolri.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/sops'>
                                    <img src="/assets/satker/sops.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/srena'>
                                    <img src="/assets/satker/srena.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center">
                                <Link href='satuan-kerja/sespim'>
                                    <img src="/assets/satker/sespim.svg" alt="logo" />
                                </Link>
                            </div>
                            <div className="flex items-center justify-center   lg:col-span-6">
                                <Link href='satuan-kerja/setupa'>
                                    <img src="/assets/satker/setupa.svg" alt="logo" />
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
                <div>

                </div>
            </div>
            <div className='w-auto md:w-1/3 lg:w-[25%]'>
                <PPIDSidebar />
            </div>
        </div>
    )
}