import React from "react";

interface GridProps {
  children?: React.ReactNode;
  className?: string;
  container?: boolean;
  column?: boolean;
  isDashboard?: boolean;
  xs?: string;
  sm?: string;
  md?: string;
  lg?: string;
  onClick?: () => void;
}

export const Grid: React.FC<GridProps> = ({
  children,
  className,
  container,
  column,
  isDashboard,
  xs,
  sm,
  md,
  lg,
  onClick,
  ...props
}) => {
  const getWidthSizes = () => {
    let sizes;

    if (xs || sm || md || lg) {
      sizes = `w-${xs} ${sm && `w-${sm}`} ${md && `md:w-${md}`} ${
        lg && `lg:w-${lg}`
      }`;
    }

    return sizes;
  };

  return (
    <div
      onClick={onClick}
      {...props}
      className={`${
        isDashboard && "shadow-xl rounded-2xl shadow-red-500/10"
      } ${className} ${container && "flex"} ${getWidthSizes()} ${
        column && "flex-col"
      }`}
    >
      {children}
    </div>
  );
};
