import PluginList from "../PluginList"
import PluginDetails from "../PluginDetails"
import usePluginsViewStore from "@/stores/pluginsViewStore"

const PluginsView = () => {

    const { isOpen, setIsOpen } = usePluginsViewStore()

    return (
        <div className="flex-1 flex overflow-y-scroll">
            <div className={`h-full w-full md:w-[350px] flex-shrink-0 sticky top-0 ${isOpen ? 'hidden md:!block' : 'block'}`}>
                <PluginList />
            </div>

            <div className={`p-2 md:p-4 flex-1 h-full ${isOpen ? 'block' : 'hidden md:!block'}`}>
                <PluginDetails />
            </div>
        </div>
    )
}

export default PluginsView