import DashboardSideMenu from "@/components/layout/dashboard-side-menu"
import Footer from "@/components/layout/footer"
import { PinIcon } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

const dummy = { name: "Andri2 Ferinata", plat: "B 14 QU" }

const menu = [
  { name: "Tugas", href: "/assignment", icon: "icon-tugas.svg" },
  { name: "Patroli Rutin", href: "/assignment", icon: "icon-patrol.svg" },
  { name: "Pengawalan Polisi", href: "/assignment", icon: "icon-patrol.svg" },
  { name: "Komunikasi", href: "/assignment", icon: "icon-komunikasi.svg" },
  { name: "SOS", href: "/assignment", icon: "icon-sos.svg" },
  { name: "Peta", href: "/assignment", icon: "icon-map.svg" },
  { name: "SPKLU", href: "/assignment", icon: "icon-spklu.svg" },
  { name: "Kata Ahli", href: "/assignment", icon: "icon-ahli.svg" },
  { name: "ETLE Toll", href: "/dashboard/etle", icon: "icon-etle.svg" },
]

export default function Dashboard() {
  return (
    <div className="grid grid-cols-3 px-12 py-16">
      <div className="col-span-2 flex flex-col pr-8">
        <p className="mb-2 text-3xl font-semibold">
          No Kendaraan : {dummy.plat}
        </p>
        <p className="my-2 text-3xl font-semibold">Petugas : {dummy.name}</p>

        <div className="my-2 grid grid-cols-4 gap-8">
          {menu.map((item) => (
            <Link
              href={item.href}
              key={item.name}
              className="flex flex-col items-center justify-center gap-2 rounded-lg bg-white p-6 text-center text-black"
            >
              <Image
                width={48}
                height={148}
                src={"/" + item.icon}
                alt={item.icon}
              />
              <p className="text-lg font-semibold">{item.name}</p>
            </Link>
          ))}
        </div>
        <Footer />
      </div>
      <div className="h-[87vh] border-l-2 border-white pl-8">
        <DashboardSideMenu />
      </div>
    </div>
  )
}