import React, { useState } from 'react';
import {
    Dialog,
    DialogContent,
} from '@/components/ui/dialog';
import backgroundImg from "../../assets/images/modalBg.png"
import { Icons } from "@/components/icons";


export function DeleteDialog({ isOpen, onClose }: any) {
    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="bg-transparent  border-none h-[400px]">
                <div className='relative' style={{ backgroundImage: `url(${backgroundImg.src})`,backgroundRepeat:"no-repeat", backgroundPosition: "center" }}>
                    <div className='absolute right-[188px] top-[-20px]'><Icons.DeleteItem /></div>
                    <div className='flex flex-col justify-center items-center mt-[20%] h-[70%] w-full gap-4'>
                        <div className='flex flex-col justify-center items-center p-4 text-center'>
                            <span className='text-[22px] font-[600] text-[#121212]'>Delete Menu</span>
                            <span className='text-[18px] font-[400] text-[#999999]'>This action is permanent and will remove all your account data.</span>
                        </div>
                        <div className='w-full flex flex-row justify-between gap-2 px-4'>
                            <button className='bg-[#FAC01A] text-[#121212] font-[600] text-[18px] w-[50%] border-0 rounded-lg p-4'  onClick={onClose}>Cancel</button>
                            <button className='bg-[#FF2D2D] text-[#fff] text-[18px] font-[600] w-[50%] border-0 rounded-lg p-4'  onClick={onClose}>Delete</button>
                        </div>
                    </div>
                </div>

            </DialogContent>
        </Dialog>
    );
}

export default DeleteDialog;