import React from 'react'

import { StyledFlex } from '@/components/atoms/Flex/Flex.theme'

import { IFlex } from './Flex.interface'

const Flex = ({
  direction,
  align,
  justify,
  wrap,
  gap,
  children,
  className,
  ...props
}: IFlex) => {
  return (
    <StyledFlex
      $direction={direction}
      $align={align}
      $justify={justify}
      $wrap={wrap}
      $gap={gap}
      className={className}
      {...props}
    >
      {children}
    </StyledFlex>
  )
}

export default Flex