import {
  StyledCover,
  StyledCoverContent,
  StyledCoverOverlay
} from './Cover.theme'
import { flexAlign, flexJustify } from '@/components/atoms/Flex/Flex.interface'

import { ICover } from './Cover.interface'
import React from 'react'
import cn from 'classnames'

const Cover = ({
  minHeight,
  contentPosition,
  imageElement,
  overlayOpacity,
  overlayColor,
  style,
  className,
  children
}: ICover) => {
  let alignClass = contentPosition
    ? contentPosition.split(' ')
    : ['center', 'center']

  return (
    <StyledCover
      className={cn(
        `align-items-${alignClass[0]}`,
        `justify-content-${alignClass[0]}`,
        className
      )}
      style={{ ...style, minHeight: minHeight || undefined }}
    >
      {imageElement}
      {overlayColor && overlayOpacity && (
        <StyledCoverOverlay
          style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
        ></StyledCoverOverlay>
      )}
      <StyledCoverContent>{children}</StyledCoverContent>
    </StyledCover>
  )
}

export default Cover