'use client'

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { RequestMachineForm } from "@/components/forms/request-machine-form"

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

export function GetFreeMachineModal({ open, onOpenChange }: GetFreeMachineModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto rounded-[2rem] border border-border/70 bg-background p-0 shadow-[0_24px_80px_rgba(0,0,0,0.18)]">
        <DialogHeader className="border-b border-border/60 px-6 pb-4 pt-6 text-left sm:px-8">
          <DialogTitle className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
            Request a Free Vending Machine
          </DialogTitle>
          <DialogDescription className="pt-2 text-sm leading-relaxed text-muted-foreground">
            Tell us about your location and we&apos;ll review the best machine mix for the space. This is the same
            Rocky intake form used on the site, not an external embed.
          </DialogDescription>
        </DialogHeader>

        <div className="px-4 pb-4 pt-5 sm:px-6 sm:pb-6 md:px-8">
          <RequestMachineForm onSubmit={() => onOpenChange(false)} />
        </div>
      </DialogContent>
    </Dialog>
  )
}