import { HTMLAttributes } from "react";

type Cols = 1 | 2 | 3 | 4;

interface ColProfile {
  base?: Cols;
  md?: Cols;
  lg?: Cols;
  xl?: Cols;
  "2xl"?: Cols;
}

interface Props extends HTMLAttributes<HTMLDivElement> {
  cols?: ColProfile;
  gap?: "sm" | "md" | "lg";
}

const BASE_COLS: Record<Cols, string> = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-4",
};
const MD_COLS: Record<Cols, string> = {
  1: "md:grid-cols-1",
  2: "md:grid-cols-2",
  3: "md:grid-cols-3",
  4: "md:grid-cols-4",
};
const LG_COLS: Record<Cols, string> = {
  1: "lg:grid-cols-1",
  2: "lg:grid-cols-2",
  3: "lg:grid-cols-3",
  4: "lg:grid-cols-4",
};
const XL_COLS: Record<Cols, string> = {
  1: "xl:grid-cols-1",
  2: "xl:grid-cols-2",
  3: "xl:grid-cols-3",
  4: "xl:grid-cols-4",
};
const XXL_COLS: Record<Cols, string> = {
  1: "2xl:grid-cols-1",
  2: "2xl:grid-cols-2",
  3: "2xl:grid-cols-3",
  4: "2xl:grid-cols-4",
};

const GAP: Record<"sm" | "md" | "lg", string> = {
  sm: "gap-3",
  md: "gap-4",
  lg: "gap-6",
};

export default function PopCardGrid({
  cols = { base: 1, md: 2, xl: 3 },
  gap = "md",
  className,
  ...rest
}: Props) {
  const { base = 1, md, lg, xl, "2xl": xxl } = cols;

  const classes = [
    "grid w-full",
    GAP[gap],
    BASE_COLS[base],
    md != null ? MD_COLS[md] : "",
    lg != null ? LG_COLS[lg] : "",
    xl != null ? XL_COLS[xl] : "",
    xxl != null ? XXL_COLS[xxl] : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return <div className={classes} {...rest} />;
}
