import React, { useState } from 'react'
import SignaturePad from './SignaturePad'
import { IoMdClose } from 'react-icons/io';
import InitialPad from './InitialPad';

interface InitialConProps {
    openInitial: boolean;
    setOpenInitial: React.Dispatch<React.SetStateAction<boolean>>;
    savedInitial: string | null;
    setSavedInitial: React.Dispatch<React.SetStateAction<string | null>>;
}

const InitialCon: React.FC<InitialConProps> = ({ openInitial, setOpenInitial, savedInitial, setSavedInitial }) => {

    const handleSaveInitial = (signatureDataUrl: string) => {
        setSavedInitial(signatureDataUrl);
        setOpenInitial(false)

    };

    // const handleSignClose = () => {
    //     setOpenInitial(false)
    // }

    return (
        <div
            className="absolute top-0 left-0 w-full h-screen"
            style={{
                display: `${openInitial ? 'block' : 'none'}`
            }}
        >
            <div className="w-full h-screen bg-slate-100 opacity-40 blur-[15px]"></div>
            <div className="absolute z-50 top-[50%] left-[50%] translate-[-50%]">
                {/* <IoMdClose
                    onClick={() => handleSignClose()}
                    className='absolute right-[15px] top-[12px] text-xl text-slate-400 hover:text-slate-600 transition cursor-pointer' /> */}
                {/* <SignaturePad onSave={handleSaveInitial} /> */}
                <InitialPad onSave={handleSaveInitial} />
            </div>
        </div>
    )
}

export default InitialCon;