import * as React from 'react';
import { Link } from 'react-router-dom';
import { IconButton } from './button';
import ReturnIcon from "../icons/return.svg";

const RecordApp: React.FC = () => {
    const [account, setAccount] = React.useState('');
    const [password, setPassword] = React.useState('');

    return (
        <div>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid rgba(0, 0, 0, 0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                    <div style={{ fontSize: 20, fontWeight: 'bolder' }}>
                        建科招聘聊天记录
                    </div>
                    <div style={{ fontSize: 14 }}>
                        输入账号密码导出聊天记录
                    </div>
                </div>
                <div>
                    <Link to='/'>
                        <IconButton
                            icon={<ReturnIcon />}
                            bordered
                            title='返回'
                            aria='返回'
                        />
                    </Link>
                </div>
            </div>
            <div style={{ width: '100%', padding: '20px 0', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <input
                    style={{ width: '50%' }}
                    type="text"
                    placeholder="请输入账号"
                    value={account}
                    onChange={(e) => {
                        const value = e.target.value;
                        setAccount(value);
                    }}
                />
                <input
                    style={{ width: '50%', margin: '20px 0' }}
                    type="password"
                    placeholder="请输入密码"
                    value={password}
                    onChange={(e) => {
                        const value = e.target.value;
                        setPassword(value);
                    }}
                />
                <button
                    style={{
                        width: '50%',
                        border: '1px solid rgba(0, 0, 0, 0.1)',
                        backgroundColor: '#FFFFFF',
                        borderRadius: '10px',
                        height: 36,
                        cursor: 'pointer'
                    }}
                    onClick={() => {
                        console.log(account, password);
                    }}
                >
                    导出
                </button>
            </div>
        </div>
    );
};

export default RecordApp;