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>
  );
}
