import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export type GridProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    columns?: 1 | 2 | 3 | 4;
    gap?: "xs" | "sm" | "md" | "lg";
    minItemWidth?: number;
    responsive?: boolean;
  }
>;

const gapClasses: Record<NonNullable<GridProps["gap"]>, string> = {
  xs: "gap-1.5",
  sm: "gap-2.5",
  md: "gap-4",
  lg: "gap-6",
};

const columnClasses: Record<NonNullable<GridProps["columns"]>, string> = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-4",
};

export function Grid({
  children,
  className,
  columns = 2,
  gap = "md",
  minItemWidth = 220,
  responsive = true,
  style,
  ...props
}: GridProps) {
  return (
    <div
      className={cn(
        "grid",
        gapClasses[gap],
        responsive ? "" : columnClasses[columns],
        className,
      )}
      style={
        responsive
          ? {
              ...style,
              gridTemplateColumns: `repeat(auto-fit, minmax(${minItemWidth}px, 1fr))`,
            }
          : style
      }
      {...props}
    >
      {children}
    </div>
  );
}