import { Flex } from 'antd'
import { useStyle } from './style.ts'
import React from 'react'

export interface IClassProps {
  enabled: boolean
  className?: string
  description?: JSX.Element | React.ReactNode
  children?: JSX.Element | React.ReactNode
}

const Glass = (props: IClassProps) => {
  const { styles } = useStyle(props)

  if (!props.enabled) {
    return props.children
  }

  return (
          <div className={styles.container}>
            <Flex justify={'center'} align={'center'} className={styles.description}>
              {props.description}
            </Flex>
            <div className={styles.glass}/>
            {props.children}
          </div>
  )
}

export const withGlass = (Component: any) => (props) => {
  return (
          <Glass enabled={props.enabled}>
            <Component {...props as any} />
          </Glass>
  )
}

export default Glass