'use client'
import DashboardSideMenu from "@/components/layout/dashboard-side-menu"
import Footer from "@/components/layout/footer"
import { getCookiesDecrypt } from "@/utils/globals"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useEffect } from "react"

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() {
  const login=getCookiesDecrypt("status")
  const router=useRouter()

  useEffect(()=>{
      if(!login){
        router.push("/auth/sign-in")
      }
  },[login,router])

  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>
  )
}