import * as React from 'react'
import {FC, ComponentPropsWithoutRef} from 'react'

/**
 * CenteredLayer is an absolutely positioned div that is centered on the screen and takes up the full width and height of its relative parent. Its children are flex items.
 * @param props - you may add any HTML attribute to this component
 * @category Components
 */
export const CenteredLayer: FC<ComponentPropsWithoutRef<`div`> & {tag?}> = ({
  children,
  className = ``,
  tag: Tag = `div`,
  ...props
}) => {
  return (
    <Tag
      {...props}
      className={`
        ${className}
        ${className.includes(`overflow`) ? `` : `overflow:hidden overflow-hidden`}
        pos-top-left-bottom-right:0
        position:absolute
        display:flex
        align-items:center
        justify-content:center
        height:100%
        width:100%
        w-full
        h-full
        justify-center
        items-center
        flex
        absolute
        top-0
        left-0
        right-0
        bottom-0
      `}
    >
      {children}
    </Tag>
  )
}

export default CenteredLayer