import { __ } from "@wordpress/i18n";
import { useQuery } from "@tanstack/react-query";
import { getFeaturedPluginsQueryOptions } from "@/shared/ploogins-search/query-options";
import { useEffect } from "@wordpress/element";
import usePluginsViewStore from "@/stores/pluginsViewStore";
import PluginsView from "../PluginsView";

const FeaturedPlugins = () => {

    const { data: featuredPlugins, isPending } = useQuery(getFeaturedPluginsQueryOptions());

    const { setData, setIsPending } = usePluginsViewStore()

    useEffect(() => {
        setData(featuredPlugins ?? [])
    }, [featuredPlugins])

    useEffect(() => {
        setIsPending(isPending)
    }, [isPending])

    return (
        <div className="h-full flex flex-col">
            <header style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0' }} className="sticky top-0 bg-white flex justify-between items-center">
                <h2 className="!text-lg !font-medium !py-0 !my-0">{__('Featured Plugins', 'ploogins-ai-assistant')}</h2>
            </header>

            <PluginsView />
        </div>
    );

}

export default FeaturedPlugins