import { IColumn, IRow } from './FlexGrid.interface'
import { StyledColumn, StyledContainer, StyledRow } from './FlexGrid.theme'

import React from 'react'

export const Row = ({
  fluid,
  direction,
  align,
  justify,
  wrap,
  mobileSpace,
  className,
  style,
  children,
  ...props
}: IRow) => {
  return (
    <StyledContainer $fluid={fluid} className={className} style={style}>
      <StyledRow
        $direction={direction}
        $align={align}
        $justify={justify}
        $wrap={wrap}
        $mobileSpace={mobileSpace}
      >
        {children}
      </StyledRow>
    </StyledContainer>
  )
}

export const Column = ({
  xs,
  sm,
  md,
  lg,
  align,
  mobileOrder,
  children,
  className,
  style,
  ...props
}: IColumn) => {
  return (
    <StyledColumn
      $xs={xs}
      $sm={sm}
      $md={md}
      $lg={lg}
      $align={align}
      $mobileOrder={mobileOrder}
      className={className}
      style={style}
    >
      {children}
    </StyledColumn>
  )
}

export default Row