import cx from "classnames";
import React from "react";
import { genResponsiveClasses } from "../../utils";

export type GridColAlign = "top" | "middle" | "bottom" | "stretch";
export type GridColSize =
  | number
  | "shrink"
  | "fill"
  | "auto"
  | Record<string, number | "shrink" | "fill" | "auto">;

export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
  align?: GridColAlign;
  tag?: React.ElementType;
  size?: GridColSize;
}

const CLASS_ROOT = "grid__col";

export const GridCol = ({
  className,
  align,
  tag = "div",
  size,
  ...other
}: GridColProps) => {
  const responsiveClasses = genResponsiveClasses(CLASS_ROOT, size);

  const classes = cx(
    CLASS_ROOT, // Always apply base class
    ...responsiveClasses.filter(Boolean), // Filter out null/undefined values
    {
      [`align-self-${align}`]: align,
    },
    className,
  );

  const TagName = tag;

  return <TagName className={classes} {...other} />;
};

GridCol.displayName = "GridCol";