import { useEffect } from 'react'
import AisleCreator from './aisleCreator/aisleCreator'
import AisleInstances from './Instances/aisleInstances'
import { useParams } from 'react-router-dom';
import { getAisleApi } from '../../../services/factoryBuilder/aisle/getAisleApi';
import { useAisleStore } from '../../../store/builder/useAisleStore';

function AislesGroup() {
    const { projectId } = useParams();
    const { setAisles } = useAisleStore();
    useEffect(() => {
        const fetchAisle = async () => {
            if (projectId) {
                const aisles = await getAisleApi(projectId);
                setAisles(aisles);
            }
        }
        fetchAisle()
    }, [])

    return (

        <>

            <AisleCreator />


            <AisleInstances />

        </>

    )
}

export default AislesGroup