import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, hotInfo } from '@/utils/http'
import { HotRowType } from '@/components/Zhot/type'
import Zhot from '@/components/Zhot'

function Text() {
  useEffect(() => {}, [])

  const allArr = useMemo(() => {
    let arr: { oneName: string; arr: HotRowType[] }[] = []
    for (const k in hotInfo) {
      arr.push({
        oneName: k,
        arr: hotInfo[k as 'cheQi']
      })
    }
    return arr
  }, [])

  const [acName, setAcName] = useState('')

  return (
    <div className={styles.Text} style={{ backgroundImage: `url(${baseURL + 'visit/bg.jpg'})` }}>
      {allArr.map(item => (
        <div key={item.oneName} className='box1'>
          <h1>{item.oneName}</h1>

          <div className='box2'>
            {item.arr.map(son => (
              <img
                src={baseURL + son.hoverSrc}
                key={son.name}
                alt=''
                onClick={() => setAcName(son.name)}
              />
            ))}
          </div>
        </div>
      ))}

      {acName ? <Zhot name={acName} closeFu={() => setAcName('')} /> : null}
    </div>
  )
}

const MemoText = React.memo(Text)

export default MemoText