"use client";
import React from "react";
import { useLocale } from "next-intl";
import { Dialog, DialogContent, DialogFooter, DialogTitle } from "../ui/dialog";

const AppModalRadix = ({
  isDialogOpen,
  setIsDialogOpen,
  width,
  padding = true,
  children,
  title,
  footer,
}: {
  isDialogOpen: boolean;
  setIsDialogOpen: (open: boolean) => void;
  width?: string;
  padding?: boolean;
  children?: React.ReactNode;
  title?: string | React.ReactNode;
  footer?: string | React.ReactNode;
}) => {
  const locale = useLocale();
  const dir = locale === "ar" ? "rtl" : "ltr";
  return (
    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
      {title && <DialogTitle>{title}</DialogTitle>}
      <DialogContent
        dir={dir}
        className={`${!padding && "!p-0"} w-[95%] ${
          width ? `xl-${width}` : "xl:w-[500px]"
        } max-w-[95%] xl:max-w-[65%] bg-white border border-secondarydark `}
      >
        {children}
      </DialogContent>
      {footer && <DialogFooter>{footer}</DialogFooter>}
    </Dialog>
  );
};

export default AppModalRadix;