import { ReactNode } from "react";
import clsx from "clsx";
import styles from "./Grid.module.scss";

type GridProps = {
    children: ReactNode;
    columns?: number;
    gap?: number | string;
    className?: string;
    style?: React.CSSProperties;
};

export default function Grid({ children, columns = 3, gap = 16, className, style }: GridProps) {
    const gridTemplateColumns = `repeat(${columns}, 1fr)`

    return (
        <div
            className={clsx(styles.grid, className)}
            style={{
                gridTemplateColumns,
                gap,
                ...style,
            }}
        >
            {children}
        </div>
    );
}