import { Button } from '@nextui-org/react'
import type React from 'react'
import { motion, useAnimation } from 'framer-motion'
import { useEffect } from 'react'
import styles from './WelcomeWord.module.less'
import BotImg from '@/assets/bot.png'
import BotPopImg from '@/assets/botPop.png'
import BotBgImg from '@/assets/botBg.png'
import SayHi from '@/assets/svg/sayHi.svg?react'

const BotEye: React.FC = () => {
  const controls = useAnimation()

  const blink = async () => {
    await controls.start({ scaleY: 0.1, transition: { duration: 0.05 } })
    await controls.start({ scaleY: 1, transition: { duration: 0.1 } })
  }

  useEffect(() => {
    const blinkInterval = setInterval(() => {
      blink()
    }, 4000)

    return () => clearInterval(blinkInterval)
  }, [])

  return (
    <motion.div
      className={`w-[10px] h-[17px] bg-white rounded-lg ${styles.eyesShadow}`}
      style={{ transformOrigin: 'center' }}
      animate={controls}
    />
  )
}

const BotAnimateBox: React.FC = () => {
  return (
    <div className="w-[180px] absolute right-0 top-[-18px]">
      <img className="w-full" src={BotImg} alt="" />
      <motion.img
        animate={{ y: '-4px', transition: { duration: 0.5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut' } }}
        initial={{ y: 0 }}
        className="absolute right-0 top-[35px] w-[42px]"
        src={BotPopImg}
        alt=""
      />
      <div className="eyes w-[43px] absolute flex justify-between left-[44px] top-[50px]">
        <BotEye />
        <BotEye />
      </div>
    </div>
  )
}

export const WelcomeWord: React.FC = () => {
  return (
    <div className="w-full h-auto flex-shrink-0 relative sm:w-[360px] sm:h-[276px]">
      <img className="absolute z-[-1] top-0 left-0" src={BotBgImg} alt="" />
      <BotAnimateBox />
      <div className="relative z-[1] box-border px-[24px] pt-[68px]">
        <SayHi />
        <p className="text-[#27353C] text-[15px] mt-[24px] mb-[16px]">做为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p>
        <Button className="bg-white text-[#20ABD9] font-medium rounded-[20px]">立即前往 ➔</Button>
      </div>
    </div>
  )
}
