export type GridColumn = string;
export type GridRow = string;

export type GridJustifySelf =
  | 'start'
  | 'end'
  | 'center'
  | 'stretch'
  | 'baseline';

export type GridAlignSelf =
  | 'start'
  | 'end'
  | 'center'
  | 'stretch'
  | 'baseline';

type GridItemOwnProps = {
  gridColumn?: GridColumn;
  gridColumnMd?: GridColumn;
  gridColumnLg?: GridColumn;
  gridRow?: GridRow;
  gridRowMd?: GridRow;
  gridRowLg?: GridRow;
  justifySelf?: GridJustifySelf;
  justifySelfMd?: GridJustifySelf;
  justifySelfLg?: GridJustifySelf;
  alignSelf?: GridAlignSelf;
  alignSelfMd?: GridAlignSelf;
  alignSelfLg?: GridAlignSelf;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
};

// This use of any is actually needed in this case so that `as` can be ANY component type including custom components
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type DistributiveOmit<T, K extends keyof any> = T extends any
  ? Omit<T, K>
  : never;

export type GridItemProps<C extends React.ElementType = 'div'> =
  GridItemOwnProps & {
    as?: C;
  } & DistributiveOmit<
    React.ComponentPropsWithoutRef<C>,
    keyof GridItemOwnProps | 'as'
  >;
