"use client"
import React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { UpdateReminderMain } from "./UpdateReminderMain"
import type { Reminder } from "@/types/reminders"
import { useTranslations } from "next-intl"

interface EditReminderModalProps {
  open: boolean
  setOpen: (open: boolean) => void
  reminder: Reminder | null
  isLoading?: boolean
}

export default function EditReminderModal({ open, setOpen, reminder, isLoading }: EditReminderModalProps) {
  const t = useTranslations()

  if (!reminder) return null

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="sm:max-w-[600px] bg-white border-0 max-h-[90vh] [&>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("reminders.modals.editTitle")}</DialogTitle>
        </DialogHeader>

        <div className="px-6 py-4 overflow-y-auto max-h-[70vh]">
          {isLoading ? (
            <div className="flex items-center justify-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
              <span className="ml-2 text-gray-600">{t("reminders.modals.loading")}</span>
            </div>
          ) : (
            <UpdateReminderMain reminder={reminder} onSuccess={() => setOpen(false)} onCancel={() => setOpen(false)} />
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}