import type { ReactNode, RefAttributes, AriaRole } from "react";
import type { Property } from "csstype";
import type { DOMProps } from "../../types/dom";
import type { SpacingType } from "../../types";

export type FlexElementType = HTMLDivElement;

export interface FlexStyleProps {
  elementType?: React.ElementType;
  flexDirection?: Property.FlexDirection;
  flexWrap?: Property.FlexWrap;
  flexGrow?: Property.FlexGrow;
  flex?: Property.Flex;
  /** Aligns grid items along the block (column) axis  */
  alignItems?: Property.AlignItems;
  /** Aligns the grid along the inline (row) axis */
  alignContent?: Property.AlignContent;
  /** Aligns the grid along the inline (row) axis */
  justifyContent?: Property.JustifyContent;
  /** How big a gap between the columns and rows */
  gap?: SpacingType;
  /** How big a gap between the rows */
  rowGap?: SpacingType;
  /** How big a gap between the columns */
  columnGap?: SpacingType;
  style?: React.CSSProperties;
  role?: AriaRole;
}

export interface FlexNonStyleProps
  extends DOMProps, RefAttributes<FlexElementType> {
  children?: ReactNode;
  /** Custom class name for setting specific CSS */
  className?: string;
}

export interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}
