"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { CheckCircle2 } from "lucide-react";
import { useTranslations } from "next-intl";

interface PageEnableDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  location: string;
  onConfirm: () => void;
  isMutating?: boolean;
}

export function PageEnableDialog({
  open,
  onOpenChange,
  title,
  location,
  onConfirm,
  isMutating,
}: PageEnableDialogProps) {
  const t = useTranslations("dashboard.pages.enable");

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[480px] rounded-2xl p-6 text-center">
        <DialogHeader className="items-center gap-0">
          <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-emerald-500/10">
            <CheckCircle2 className="size-7 text-emerald-500" />
          </div>
          <DialogTitle className="mt-4 text-base font-bold text-foreground">
            {t("title", { title, location })}
          </DialogTitle>
          <DialogDescription className="mt-2 text-sm text-muted-foreground">
            {t("subtitle")}
          </DialogDescription>
        </DialogHeader>
        <div className="mt-6 grid grid-cols-2 gap-3">
          <DialogClose asChild>
            <Button
              type="button"
              variant="outline"
              disabled={isMutating}
              className="h-11 rounded-xl"
            >
              {t("cancel")}
            </Button>
          </DialogClose>
          <Button
            type="button"
            disabled={isMutating}
            onClick={onConfirm}
            className="h-11 rounded-xl bg-primary font-bold text-white hover:bg-primary/90"
          >
            {t("confirm")}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}