import React from 'react'
import { UI } from '@hyext/hy-ui'
import './index.hycss'

const { View } = UI

export type FlexContianerProps = {
  height?: string // percentage
  mode?: 'static' | 'full'
} & ExtraStyleProps

function FlexContianer(props: FlexContianerProps & React.PropsWithChildren) {
  const height = props.height
  const wrapperClassName =
    props.mode === 'static' ? 'flex-contianer-static' : 'flex-contianer-full'

  let style = null
  if (props.mode === 'static') {
    style = { ...props.extraStyle }
  }

  return (
    <View className={`wrapper ${wrapperClassName}`} style={style}>
      <View className="flex-contianer-container">
        <View className="flex-contianer-inner">{props.children}</View>
      </View>
    </View>
  )
}

FlexContianer.defaultProps = {
  mode: 'static',
}

export default FlexContianer
