import { useState } from "react";
import { FaSignature, FaCheckCircle } from "react-icons/fa";
import { MdOutlinePrivacyTip } from "react-icons/md";

interface ConsentScreenProps {
    onConsent: () => void;
    onDecline?: () => void;
}

export default function ConsentScreen({ onConsent, onDecline }: ConsentScreenProps) {
    const [accepted, setAccepted] = useState(false);

    console.log("USER ACCEPTED CALLED")

    return (
        <>
            <div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-slate-100 opacity-50 backdrop-filter backdrop-blur-2xl z-50"></div>
            <div className="absolute top-0 left-0 w-full h-screen flex items-center justify-center p-6 z-50">
                <div className="bg-white shadow-xl rounded-2xl p-8 max-w-lg w-full border border-gray-200">
                    {/* Header */}
                    <div className="flex items-center gap-3 mb-6">
                        <FaSignature className="text-blue-600 text-3xl" />
                        <h2 className="text-2xl font-semibold text-gray-800">
                            Consent for E-Signature
                        </h2>
                    </div>

                    {/* Info */}
                    <div className="flex items-start gap-3 mb-6 text-gray-600">
                        <MdOutlinePrivacyTip className="text-xl text-blue-500 mt-1" />
                        <p className="text-sm leading-relaxed">
                            By providing your electronic signature, you agree that it is the legal
                            equivalent of your manual signature on this document. Please review the
                            agreement carefully before proceeding.
                        </p>
                    </div>

                    {/* Checkbox */}
                    <label className="flex items-center gap-3 mb-6 cursor-pointer select-none">
                        <input
                            type="checkbox"
                            checked={accepted}
                            onChange={(e) => setAccepted(e.target.checked)}
                            className="w-5 h-5 accent-blue-600 border-gray-300 rounded"
                        />
                        <span className="text-sm text-gray-700">
                            I agree to sign electronically
                        </span>
                    </label>

                    {/* Buttons */}
                    <div className="flex gap-4 flex-row-reverse">
                        <button
                            className={`flex-1 cursor-pointer flex items-center justify-center gap-2 rounded-xl py-2 font-medium transition-colors 
              ${accepted ? "bg-blue-600 text-white hover:bg-blue-700" : "bg-gray-300 text-gray-500 cursor-not-allowed"}
            `}
                            disabled={!accepted}
                            onClick={onConsent}
                        >
                            <FaCheckCircle /> Continue
                        </button>

                        {/* {onDecline && (
                            <button
                                className="flex-1 border border-red-500 text-red-500 hover:bg-red-50 rounded-xl py-2 font-medium transition-colors"
                                onClick={onDecline}
                            >
                                Decline
                            </button>
                        )} */}
                    </div>
                </div>
            </div>
        </>

    );
}