import React, { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { LoginWrapper } from './style'
import { Input, Button } from 'antd'
import { useNavigate } from 'react-router-dom'

interface IProps {
  children?: ReactNode
}

const Login: FC<IProps> = memo(() => {
  const naviate = useNavigate()

  const loginHandler = () => {
    setLoadingState(true)

    setTimeout(() => {
      setLoadingState(false)

      naviate('/discover')
    }, 2000)
  }

  const [loadingState, setLoadingState] = useState<boolean>(false)

  return (
    <LoginWrapper>
      <div className="loginBox">
        <div className="title flexC">宠物问诊-兽医端</div>
        <div className="subtitle">账号</div>
        <Input placeholder="请输入手机号" className="inputbox" />
        <div className="subtitle">验证码</div>
        <Input placeholder="请输入密码" className="inputbox" suffix={<div style={{ color: '#05b8d2', fontSize: '17px' }}>获取验证码</div>} />
        <Button className="loginbtn" onClick={loginHandler} loading={loadingState}>
          登录
        </Button>
      </div>
    </LoginWrapper>
  )
})

export default Login