import { useEffect, useState } from "preact/hooks";

export default function ListPackageDetails(props: any) {
    const [packages, setPacakges] = useState(props.packages);
    const [projectName, setProjectName] = useState(props.projectname);
    const [projectVersion, setProjectVersion] = useState(props.projectversion);
    const [projectDesc, setProjectDesc] = useState(props.projectdesc);
    const [isLoading, setIsLoading] = useState(false);
    useEffect(() => {
        fetchRegistry();
    }, [packages])

    const fetchRegistry = async () => {
        setIsLoading(true);
        const response = await fetch("/api/npm", {
            method: 'POST',
            body: JSON.stringify(packages)
        });
        const data = await response.json();
        setIsLoading(false);
    }

    return (
        <div>
            <h3>{projectName}</h3>
            <h4>{projectVersion}</h4>
            <h5>{projectDesc}</h5>
            {isLoading ? <>Loading</> : <>Data</>}
        </div>
    )
}