import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
import { Box, BoxProps, ResponsiveValue } from './Box';

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
 * 
 * Stack is for flexbox-based layouts (stacking elements).
 * 
 * - DO NOT add positioning props (absolute, top, zIndex).
 * - DO NOT add grid props.
 * - DO NOT add background/border props unless it's a specific styled stack.
 * 
 * If you need a more specific layout, create a new component in apps/website/components.
 */

export interface StackProps<T extends ElementType> extends BoxProps<T> {
  as?: T;
  children?: ReactNode;
  direction?: 'row' | 'col' | ResponsiveValue<'row' | 'col'>;
  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around'>;
  wrap?: boolean;
  hoverColor?: string;
}

export const Stack = forwardRef(<T extends ElementType = 'div'>(
  { 
    children, 
    direction = 'col',
    gap = 4,
    align,
    justify,
    wrap = false,
    as,
    hoverColor,
    ...props
  }: StackProps<T>,
  ref: ForwardedRef<HTMLElement>
) => {
  return (
    <Box 
      as={as} 
      ref={ref}
      display="flex"
      flexDirection={direction}
      gap={gap}
      alignItems={align}
      justifyContent={justify}
      flexWrap={wrap ? 'wrap' : 'nowrap'}
      hoverTextColor={hoverColor}
      {...props}
    >
      {children}
    </Box>
  );
});

Stack.displayName = 'Stack';