import React, { useState } from "react";
import { Button } from "../ui/button";

const Division = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [seeAllValue, setSeeAllValue] = useState(false);

  const regions = [
    { name: "SIBER", logo: "/assets/satker/siber.png" },
    { name: "DIVKUM", logo: "/assets/satker/divkum.png" },
    { name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
    { name: "SSDM", logo: "/assets/satker/ssdm.png" },
    { name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
    { name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
    { name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
    { name: "BRIMOB", logo: "/assets/satker/brimob.png" },
    { name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
    { name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
    { name: "BINMAS", logo: "/assets/satker/binmas.png" },
    { name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
    { name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
    { name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
    { name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
    { name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
    { name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
    { name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
    { name: "POLAIR", logo: "/assets/satker/polair.png" },
    { name: "POLUDARA", logo: "/assets/satker/poludara.png" },
    { name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
    { name: "AKPOL", logo: "/assets/satker/akpol.png" },
    { name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
    { name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
    { name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
    { name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
    { name: "SLOG", logo: "/assets/satker/slog.png" },
    { name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
    { name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
    { name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
    { name: "SETUM", logo: "/assets/satker/setum.png" },
    { name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
    { name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
    { name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
    { name: "SOPS", logo: "/assets/satker/sops.png" },
    { name: "SRENA", logo: "/assets/satker/srena.png" },
    { name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
    { name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
  ];

  return (
    <div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
      {/* Header */}
      <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
        Liputan <span className="text-[#bb3523]">Satker</span>
      </h2>
      <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>

      {/* Pencarian */}
      <div className="flex items-center justify-center gap-4 mb-6">
        <input
          type="text"
          placeholder="Pencarian"
          className="w-full max-w-sm px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button className="px-2 lg:px-4 lg:py-2 bg-[#bb3523] text-white rounded-md hover:bg-red-700">Cari Liputan &gt;</button>
      </div>

      {/* Grid Wilayah */}
      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6">
        {regions.map((region, index) =>
          !seeAllValue ? (
            index < 7 ? (
              <div key={index} className="flex flex-col items-center text-center group">
                <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                  <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                </div>
                <p className="text-md font-semibold">{region.name}</p>
              </div>
            ) : (
              ""
            )
          ) : (
            <div key={index} className="flex flex-col items-center text-center group">
              <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
              </div>
              <p className="text-md font-semibold">{region.name}</p>
            </div>
          )
        )}
      </div>
      <div className="flex justify-center py-5">
        <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
          Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
        </Button>
      </div>
    </div>
  );
};

export default Division;
