"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Home, UtensilsCrossed, Binoculars, ArrowRight } from "lucide-react"
import Link from "next/link"
import { cn } from "@/lib/utils"

interface BookingDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function BookingDialog({ open, onOpenChange }: BookingDialogProps) {
  const bookingOptions = [
    {
      icon: Home,
      title: "Book Room",
      description: "Wake up to the sounds of nature and enjoy the comfort of our farm-inspired accommodations",
      href: "/booking/room",
    },
    {
      icon: UtensilsCrossed,
      title: "Book Facility",
      description: "From intimate gatherings to grand celebrations, we offers versatile facilities perfect for any occasion.",
      href: "/booking/facility",
    },
    {
      icon: Binoculars,
      title: "Book Experience",
      description: "Whether you're looking for a peaceful family getaway, a fun-filled school tour, a romantic retreat, or an exciting team-building adventure, our resort has something special for everyone",
      href: "/booking/experience",
    },
  ]

  return (
    <Dialog open={open} onOpenChange={onOpenChange} >
      <DialogContent className="w-[90%] md:w-[80%] lg:w-[60%] p-3 md:p-6 bg-[#FAFAFA]">
        <DialogHeader className="mb-2">
          <DialogTitle className="text-sm font-bold text-gray-900">Booking Type</DialogTitle>
        </DialogHeader>

        <div>
          <h2 className="text-sm font-bold mb-3" style={{ color: "#002E62" }}>
            Select Booking Option
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {bookingOptions.map((option, index) => {
    const Icon = option.icon
    const isLast = index === bookingOptions.length - 1

    return (
      <Link
        key={index}
        href={option.href}
        onClick={() => onOpenChange(false)}
        className={cn(
          "group relative border bg-white border-[#CCE3FD] rounded-2xl p-4 hover:border-[#0D8B4D] transition-all cursor-pointer",
          isLast && "md:col-span-2" 
        )}
      >
        <div className="flex flex-col items-start gap-2">
          <div className="flex flex-row justify-between items-start w-full">
            <div className="w-10 h-10 rounded-full bg-[#E8F5F0] flex items-center justify-center shrink-0">
              <Icon className="w-4 h-4" strokeWidth={1.5} style={{ color: "#0D8B4D" }} />
            </div>
            <ArrowRight className="w-4 h-4 text-gray-300  shrink-0" />
          </div>

          <div className="flex-1">
            <h3 className="text-[0.8rem] font-bold mb-0" style={{ color: "#002E62" }}>
              {option.title}
            </h3>
            <p className="text-[0.79rem] text-gray-600 leading-relaxed">
              {option.description}
            </p>
          </div>
        </div>
      </Link>
    )
  })}
</div>

        </div>
      </DialogContent>
    </Dialog>
  )
}