import React, { useRef } from 'react'

const aligments = {
  start: 'flex-start',
  center: 'center',
  end: 'flex-end'
}

interface Props {
  width: string
  height: string
  containerData: any
  verticalGap: number
  horizontalGap: number
  children?: any
  style: any
}


export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {

  const itemRef = useRef(null)

  return (
    <div ref={itemRef}
      style={{
        overflow: 'hidden',
        display: 'flex',
        position: 'relative',
        alignItems: aligments['center'],
        justifyContent: aligments['center'],
        width: width,
        height: height,
        top: containerData.ic_rowIndex === 0
          ? '0'
          : verticalGap
            ? `${verticalGap * containerData.ic_rowIndex}%`
            : '0',
        paddingLeft: containerData.ic_columnIndex === 0
          ? '0'
          : horizontalGap
            ? `${horizontalGap}%`
            : '0'
        , ...style
      }}
    >
      {React.cloneElement(children, containerData)}
    </div>
  )
}


