import { type CSSProperties, memo } from 'react'
import { cn } from '@/utils/cn'

export interface PlaceholderProps {
  className?: string
  style?: CSSProperties
  children?: React.ReactNode
  onClick?: (e: React.MouseEvent) => void
}

function Placeholder(props: PlaceholderProps) {
  const { className, style, children, onClick } = props
  return (
    <div className='absolute z-1 w-full h-full flex items-center justify-center overflow-hidden'>
      <div
        className={cn(
          'animate-pulse',
          'absolute top-0 left-0 backdrop-blur-11px w-100% h-100% flex items-center justify-center text-white font-w-[16px] font-weight-500',
          'bg-[radial-gradient(241%_81%_at_3%_0%,rgba(123,97,255,0.4)_0%,rgba(255,255,255,0)_100%),linear-gradient(143deg,rgba(255,255,255,0.7)_4%,rgba(97,205,255,0.7)_99%)]',
          className,
        )}
        style={style}
        onClick={onClick}
      ></div>
      <span className='text-white z-1'>{children}</span>
    </div>
  )
}

export default memo(Placeholder)
