import React, { useState } from "react";
import { Tag, Card, Steps, Button, Radio, Form, Input, Row, Col, Select, Image } from "antd";
import { useTranslation } from 'react-i18next';
import FaceRecognitionModal from "./FaceRecognitionModal";
import "../style.less";

export default (props) => {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false)

  const onOpen = () => {
    setOpen(true)
  }

  return (
    <>
      <div style={{ fontSize: '24px', fontWeight: '400' }}>{t('authentication.FaceRecognitionTitle')}</div>
      <Card bordered={false} style={{ width: '900px', paddingBottom: '3vw' }}>
        <div style={{ fontSize: '16px', marginBottom: '24px' }}>{t('authentication.FaceRecognitionContent1')}</div>
        <div style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '12px' }}>{t('authentication.FaceRecognitionSubTitle')}</div>
        <div className="face-recognition-box">
          <div style={{ flex: 0.3 }}>
            <div style={{ fontSize: '16px' }}>{t('authentication.FaceRecognitionName')}</div>
            <div style={{ fontSize: '16px', fontWeight: 'bold' }}>XXX</div>
          </div>
          <div style={{ flex: 0.4 }}>
            <div style={{ fontSize: '16px' }}>{t('authentication.FaceRecognitionState')}</div>
            <div><Tag color="orange">{t('authentication.FaceRecognitionTag1')}</Tag></div>
          </div>
          <div style={{ flex: 0.3 }}>
            <Button type="primary" onClick={onOpen}>{t('authentication.FaceRecognitionBtn1')}</Button>
          </div>
        </div>
        <div style={{ fontSize: '16px', marginTop: '12px', marginBottom: '40px' }}>{t('authentication.FaceRecognitionContent2')}</div>
        <Button size="large" style={{ width: '6vw' }}>{t('authentication.FaceRecognitionBtn2')}</Button>
      </Card>
      <FaceRecognitionModal open={open} setOpen={setOpen} />
    </>
  )
}