"use client"

import { ArrowLeftIcon, ChevronLeft } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import Image from "next/image"

const dummy = [
  { url: "/sample-1.jpg" },
  { url: "/sample-2.jpg" },
  { url: "/sample-3.jpg" },
  { url: "/sample-4.jpg" },
  { url: "/sample-1.jpg" },
  { url: "/sample-2.jpg" },
  { url: "/sample-3.jpg" },
  { url: "/sample-4.jpg" },
  { url: "/sample-1.jpg" },
]

export default function Etle() {
  const router = useRouter()
  return (
    <div className="flex flex-col">
      <div className="flex h-[8vh] flex-row items-center gap-10 bg-[#0057B3] px-8 py-5">
        <Link href="/dashboard">
          <ArrowLeftIcon />
        </Link>
        <p className="text-2xl font-semibold">ETLE Toll</p>
      </div>
      <div className="flex h-[92vh] flex-col items-start gap-5 bg-gray-200 p-8 text-black">
        <p className="text-2xl font-semibold">TRAFFIC VIOLATIONS</p>
        <Image
          src={"/sample-1.jpg"}
          width={1280}
          height={960}
          alt={"main-image"}
          className="w-screen rounded-lg md:w-full xl:w-180"
        />
        <Button
          variant="ghost"
          className="h-12 bg-white px-10 text-xl shadow-sm"
        >
          D1234PZ
        </Button>
        <p className="text-2xl font-semibold">VIOLATIONS</p>
        <p>
          Plat yang terdeteksi berangka D1234PZ di 2026-01-08 jam 17:55:26
          berada di jalur 2
        </p>
      </div>
      <Drawer direction="right">
        <DrawerTrigger asChild>
          <Button className="fixed top-1/2 right-0 h-20 w-6 -translate-y-1/2 cursor-pointer rounded-none rounded-l-md bg-white">
            <ChevronLeft />
          </Button>
        </DrawerTrigger>
        <DrawerContent>
          <div className="no-scrollbar space-y-3 overflow-y-auto bg-[#CBCBCBCC] px-4 py-4 text-black">
            <div className="rounded-lg bg-white p-3 text-lg">
              Total Image: 10
            </div>{" "}
            {dummy.map((item, index) => (
              <div key={index} className="rounded-lg bg-white p-3 text-lg">
                <Image
                  src={item.url}
                  width={1280}
                  height={960}
                  alt={"image" + index}
                  className="rounded-lg"
                />
              </div>
            ))}
          </div>
        </DrawerContent>
      </Drawer>
      {/* <Sheet>
        <SheetTrigger asChild>
          <Button className="fixed top-1/2 right-0 h-20 w-6 -translate-y-1/2 rounded-l-md">
            <ChevronLeft />
          </Button>
        </SheetTrigger>
        <SheetContent>
          <div className="grid flex-1 auto-rows-min gap-6 bg-[#CBCBCBCC] px-4 py-10 text-black">
            <div className="flex flex-col gap-4">
              <div className="rounded-lg bg-white p-3 text-lg">
                Total Image: 10
              </div>{" "}
            </div>
          </div>
        </SheetContent>
      </Sheet> */}
    </div>
  )
}