"use client"
import React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { OfferForm } from "./OfferForm"
import { Offer, OfferType } from "@/types/offers"
import { useTranslations } from "next-intl"

interface EditOfferModalProps {
  open: boolean
  setOpen: (open: boolean) => void
  offer: Offer | null
}

export default function EditOfferModal({ open, setOpen, offer }: EditOfferModalProps) {
  const t = useTranslations()

  if (!offer) return null

  return (
    <Dialog modal={true} open={open} onOpenChange={setOpen}>
      <DialogContent className="sm:max-w-[750px] bg-white border-0 max-h-[90vh] overflow-y-auto [&>button]:top-5 [&>button]:right-5 [&>button]:text-white [&>button]:hover:text-gray-200 [&>button>svg]:stroke-[4px]">
        <DialogHeader className="bg-primary-gradient -m-6 mb-0 px-6 py-3 rounded-t-lg">
          <DialogTitle className="text-white text-lg font-medium">{t("marketing.modals.editTitle")}</DialogTitle>
        </DialogHeader>
        <OfferForm
          offerType={offer.type}
          mode="edit"
          initialData={offer}
          onSuccess={() => {
            setOpen(false)
          }}
          onCancel={() => {
            setOpen(false)
          }}
        />
      </DialogContent>
    </Dialog>
  )
}