import { Button } from "./ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogOverlay,
} from "./ui/dialog";
import { Phone } from "lucide-react";

export default function CallDialog({
  isCallModalOpen,
  setIsCallModalOpen,
  handleCallConfirm,
}: {
  isCallModalOpen: boolean;
  setIsCallModalOpen: (open: boolean) => void;
  handleCallConfirm: () => void;
}) {
  return (
    <Dialog open={isCallModalOpen} onOpenChange={setIsCallModalOpen}>
      <DialogOverlay />
      <DialogContent
        className={`p-4 bg-WHITE overflow-y-auto rounded-[10px] w-[calc(100%-40px)]`}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center justify-center gap-2">
            <Phone size={20} />
            تماس با پشتیبانی
          </DialogTitle>
        </DialogHeader>
        <div className="py-4">
          <p className="text-GRAY">آیا میخواهید تماس بگیرید؟</p>
        </div>
        <DialogFooter className="flex gap-2 justify-center">
          <Button
            variant="outline"
            className="w-full"
            size="lg"
            onClick={() => setIsCallModalOpen(false)}
          >
            انصراف
          </Button>
          <Button
            size="lg"
            variant="dark"
            onClick={handleCallConfirm}
            className="w-full"
          >
            تماس بگیرید
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}