"use client"

import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { ReactNode, useEffect, useState } from "react"

interface HumanVerificationProps {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    onSuccess?: () => void;
    onFail?: (reason?: string) => void;
    children: ReactNode;
}

export function HumanVerification({ open, onOpenChange, onSuccess, onFail, children }: HumanVerificationProps) {
    const [i_open, i_setOpen] = useState(false);
    const setOpen = (o: boolean) => {
        i_setOpen(o);
        onOpenChange?.(o);
    };

    useEffect(() => {
        if (i_open) {
            setOpen(false);
            onSuccess?.();
        }
    }, [i_open]);

    return (
        <Dialog open={open ?? i_open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                {children}
            </DialogTrigger>
            <DialogContent className="sm:max-w-80">
                <DialogHeader>
                    <DialogTitle>人机验证</DialogTitle>
                    <DialogDescription>
                        请拖动滑块以使得图片水平
                    </DialogDescription>
                </DialogHeader>
                <div>

                </div>
            </DialogContent>
        </Dialog>
    )
}