import styles from './index.module.scss';
import cx from '../utils/classname.js';
import { FlexProps } from './types.js';

const FlexComponent = ({
  as: Component = 'div',
  direction = 'row',
  wrap = 'nowrap',
  justifyContent = 'flex-start',
  alignItems = 'stretch',
  alignContent = 'stretch',
  gap,
  paddingInline,
  paddingBlock,
  marginInline,
  marginBlock,
  maxWidth,
  maxHeight,
  inline = false,
  className = '',
  style = {},
  children,
}: FlexProps) => {
  const defaultClasses = styles.flex;
  const combinedClasses = cx(defaultClasses, className);

  const inlineStyles: React.CSSProperties = {
    display: inline ? 'inline-flex' : 'flex',
    flexDirection: direction,
    flexWrap: wrap,
    justifyContent,
    alignItems,
    alignContent,
    ...(gap ? { gap } : {}),
    ...(paddingInline ? { paddingInline } : {}),
    ...(paddingBlock ? { paddingBlock } : {}),
    ...(marginInline ? { marginInline } : {}),
    ...(marginBlock ? { marginBlock } : {}),
    ...(maxWidth ? { maxWidth } : {}),
    ...(maxHeight ? { maxHeight } : {}),
    ...style,
  };

  return (
    <Component className={combinedClasses} style={inlineStyles}>
      {children}
    </Component>
  );
};

const Flex = FlexComponent as typeof FlexComponent;

export default Flex;
