import { getBackgroundImage, getStaticImage } from '@/lib/utils'

export interface ErrorAlertProps {
  /** 文本 */
  text: string
  /** 是否可见 */
  visible?: boolean
  /** 点击遮罩层回调 */
  onMaskClick?: () => void
  /** 关闭回调 */
  onClose?: () => void
  /** 自定义 zIndex */
  zIndex?: number
}

/**
 * Alert 组件 - 提示弹窗
 * @returns
 */
const ErrorAlert = ({
  text,
  visible = true,
  onMaskClick,
  onClose,
  zIndex = 10000,
}: ErrorAlertProps) => {
  if (!visible) return null

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center" style={{ zIndex }}>
      {/* 蒙版背景 */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url(${getStaticImage('components/蒙版遮罩')})`,
        }}
        onClick={onMaskClick || onClose}
      />

      {/* 内容 */}
      <div className="relative w-full z-10 flex flex-col items-center justify-center gap-10">
        {/* 标题和副标题容器 - 带深色背景条 */}
        <div className="w-full bg-black/70 px-20 py-20 flex flex-col items-center gap-4">
          {/* 副标题 */}
          <div className="text-white text-5xl font-medium tracking-widest leading-18">{text}</div>
        </div>

        {/* 继续按钮 */}
        <div
          className="w-[414px] h-[109px] bg-cover bg-center bg-no-repeat cursor-pointer hover:scale-105 hover:brightness-110 transition-all duration-300"
          style={{
            backgroundImage: `
              ${getBackgroundImage('components/继续前进')},
              ${getBackgroundImage('components/按钮')}
              `,
          }}
          onClick={onClose}
          onMouseDown={(e) => e.stopPropagation()}
        ></div>
      </div>
    </div>
  )
}

export default ErrorAlert