import React, { useMemo } from 'react'
import { GridComponents, GridComponentsContext } from './context'

export type GridComponentsProviderProps = {
    components: Partial<typeof GridComponents>
    children: React.ReactNode
}

/**
 * By using this provider, you can override any of the default layout
 * components to control the markup and look of the grid.
 *
 * However, overriding at this level is an advanced concern, and should not be needed
 * in most cases. Please reach out to the Design System Team if you need to use this component
 * so we are aware of the need.
 */
export const GridComponentsProvider = ({
    components,
    children,
}: GridComponentsProviderProps) => {
    const state = useMemo(
        () => ({
            ...GridComponents,
            ...components,
        }),
        [components]
    )
    return (
        <GridComponentsContext.Provider value={state}>
            {children}
        </GridComponentsContext.Provider>
    )
}