import React from 'react'
import clsxm from '~/libs/clsxm'

type Props = {
  children: React.ReactNode,
  isLoaded: boolean,
  height: string,
  duration?: string
  delay?: string
} & React.HTMLProps<HTMLDivElement>

const SmoothRender = (props: Props) => {
  const {
    children,
    isLoaded,
    height,
    duration = 0,
    delay = 0,
    style,
    className,
    ...rest
  } = props

  return (
    <div
      className={clsxm('overflow-y-hidden transition-all', className)}
      style={{
        opacity: isLoaded ? 1 : 0,
        height: isLoaded ? height : 0,
        transitionDuration: duration || '',
        transitionDelay: delay || '',
        ...style
      }}
      {...rest}
    >
      {isLoaded && children}
    </div>
  )
}

export default SmoothRender