"use client";

import React from "react";
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import Image from "next/image";
import Coverage from "./coverage";
import Division from "./division";

const AreaCoverageWorkUnits = () => {
  return (
    <div className="mx-auto px-4 lg:px-12 py-6">
      <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
        Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
      </h2>
      <div className="h-1 w-[250px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
      <div className="flex flex-col justify-center lg:flex-row gap-8">
        {/* POLDA */}
        <Dialog>
          <DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
            <Image width={1920} height={1080} alt="indo" src="/assets/indo.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
            <p className="text-base font-bold">Polda Jajaran</p>
          </DialogTrigger>
          <DialogContent size="md">
            <DialogHeader className="flex flex-col justify-center">
              <DialogTitle>
                <p className="text-center">Polda Jajaran</p>
              </DialogTitle>
              <DialogTitle>
                <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
              </DialogTitle>
            </DialogHeader>
            <Coverage />
            <div className="text-right mt-4">
              <DialogClose asChild>
                <button className="text-[#bb3523] font-bold">Tutup</button>
              </DialogClose>
            </div>
          </DialogContent>
        </Dialog>

        {/* SATKER */}
        <Dialog>
          <DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
            <Image width={1920} height={1080} alt="polri" src="/assets/logo-polri.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
            <p className="text-base font-bold">Satuan Kerja Polri</p>
          </DialogTrigger>
          <DialogContent size="md">
            <DialogHeader className="flex flex-col justify-center">
              <DialogTitle>
                <p className="text-center">Satuan Kerja Polri</p>
              </DialogTitle>
              <DialogTitle>
                <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
              </DialogTitle>
            </DialogHeader>
            <Division />
            <div className="text-right mt-4">
              <DialogClose asChild>
                <button className="text-[#bb3523] font-bold">Tutup</button>
              </DialogClose>
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
};

export default AreaCoverageWorkUnits;