import { Image } from '@/components'
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
import { motion } from 'framer-motion'
import type { ReactNode } from 'react'

type UnlockHintDialogProps = {
  title?: string
  starName: string
  visible: boolean
  onClose: () => void
  onShare?: () => void
  children?: ReactNode
}

const UnlockHintDialog = ({
  title,
  starName,
  visible,
  onClose,
  onShare,
  children,
}: UnlockHintDialogProps) => {
  return (
    <motion.div
      className="absolute inset-0 z-50 flex items-center justify-center"
      initial={{ opacity: 0 }}
      animate={{ opacity: visible ? 1 : 0 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.18, ease: 'easeOut' }}
      style={{
        pointerEvents: visible ? 'auto' : 'none',
        backgroundColor: 'rgba(132, 120, 100, 0.93)',
      }}
    >
      {visible && (
        <div
          className="relative w-[1666px] h-[972px] bg-no-repeat bg-cover p-12 pl-4"
          style={{
            backgroundImage: getBackgroundImage(
              `${starName}/reflection/lobby/dialog/场景交互底板-最后一个`
            ),
          }}
        >
          <Image
            button
            src={getStaticImage(`${starName}/reflection/lobby/dialog/按钮关闭2`)}
            className="absolute -right-10 -top-8 z-10"
            alt="关闭"
            onClick={onClose}
          />

          {title && (
            <div className="flex justify-center items-center h-42">
              <div className="w-3/4 text-4xl font-bold text-[#E0D2B3] text-center leading-14">
                {title}
              </div>
            </div>
          )}

          <div className="h-[calc(100%-188px)]">{children}</div>

          {onShare && (
            <div className="absolute -right-20 bottom-1/2 translate-y-1/2">
              <Image
                button
                src={getStaticImage(`${starName}/reflection/lobby/icon/分享`)}
                alt="分享"
                onClick={onShare}
              />
            </div>
          )}
        </div>
      )}
    </motion.div>
  )
}

export default UnlockHintDialog