"use client";
import { Fragment, useEffect, useState } from "react";
import { createGlobalStyle } from "styled-components";
import Style, { Grid } from "./GridContainer.styled";
import GridContent from "./GridContent";
import { GridArea as Area } from "./GridContent.styled";
export default function GridContainer(props) {
    const gap = props?.gap || 0;
    const scroll = typeof props?.scroll === "boolean" ? props?.scroll : true;
    const [grid, setGrid] = useState();
    useEffect(() => {
        setGrid(Math.random().toString(16).substring(2));
    }, []);
    return (<Style $fullsize={props?.fullsize || false} $scroll={scroll}>
            {grid && (<Grid data-area={grid} $area={props?.area} $direction={props?.direction} $gap={gap} $width={props?.width} $height={props?.height} $responsive={props?.responsive} style={props?.style}>
                    {props?.contents && props?.contents?.length > 0
                ? props?.contents?.map((v, k) => (<Fragment key={k}>
                                  <GridContent format={props?.format} {...v}/>
                                  <GridArea {...{
                    $parent: grid,
                    $id: k,
                    $area: v?.area,
                    $responsive: v?.responsive,
                }}/>
                              </Fragment>))
                : props?.children && props.children?.length > 0
                    ? props?.children?.map((v, k) => (<Fragment key={k}>
                                  <Fragment>{v}</Fragment>
                                  <GridArea {...{
                        $parent: grid,
                        $id: k,
                        $area: v?.area,
                        $responsive: v?.responsive,
                    }}/>
                              </Fragment>))
                    : props?.children}
                </Grid>)}
        </Style>);
}
const GridArea = createGlobalStyle `
    [data-area="${({ $parent }) => $parent}"] > *:nth-child(${({ $id }) => `${$id + 1}`}){
        ${Area};  
    }
`;
//# sourceMappingURL=GridContainer.jsx.map