import React, { useCallback } from 'react'
import styles from './index.module.scss'
import { Image } from 'antd-mobile'

type Props = {
  src: string
  clickFu?: () => void
}

function LazyImg({ src, clickFu }: Props) {
  const imgClick = useCallback(() => {
    if (clickFu) clickFu()
  }, [clickFu])

  return (
    <Image
      style={{ cursor: clickFu ? 'pointer' : 'default' }}
      onClick={imgClick}
      className={styles.LazyImg}
      lazy
      src={src}
      placeholder={<div className='lodingTxt'>加载中...</div>}
    />
  )
}

const MemoLazyImg = React.memo(LazyImg)

export default MemoLazyImg
