import React from 'react';
import './UserProfile.css';
import { Layout, Card, Avatar, Col, Row, Divider, Typography, Tag, Space } from 'antd';
import 'antd/dist/antd.css';
import { authenticationService } from '../../_services';
import { Siderc } from '../Main/Siderc';
import { Headerc } from '../Main/Headerc';
import { PhoneOutlined, MailOutlined } from '@ant-design/icons';

const { Meta } = Card;
const { Title, Text } = Typography;

class UserProfile extends React.Component{

    render() {

        return(
            <Layout>
                <Siderc />
                <Layout style={{}}>
                    <Headerc />
                    <Layout>
                    <Row style={{ background: '#FAFAFA', padding: '10px' }}>
                    <Col span={8} className="userside">
                        <Card
                        cover={<Avatar size={64} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{ verticalAlign: 'middle' }} />}>
                        <Meta 
                            title= 'Jack Richards'
                            description= 'Roll No 12' />
                        </Card>
                        {/* <div style={{ alignItems: 'center' }}>
                        <Avatar size={64} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" style={{ verticalAlign: 'middle' }} />
                        <Meta 
                            title= 'Jack Richards'
                            description= 'Roll No 12' />
                        </div> */}
                        <Divider />
                        <Title level={4}>Topics</Title>
                        <div>
                        <Tag>Mathematics</Tag>
                        <Tag>Science</Tag>
                        <Tag>English</Tag>
                        </div>
                        <Divider />
                        <span></span>
                        <Title level={4}>Contact Number</Title>
                        <div>
                            <Space>
                            <PhoneOutlined />
                            <Text type="secondary">9999999999</Text>
                            </Space>
                        </div>
                        <Space></Space>
                        <Title level={4}>Email ID</Title>
                        <div>
                            <Space>
                            <MailOutlined />
                            <Text type="secondary">user@gmail.com</Text>
                            </Space>
                        </div>
                    </Col>
                    <Col span={16} style={{ padding: '10px' }}>col-16</Col>
                    </Row>
                    </Layout>
                </Layout>
            </Layout>
        );
    }

}

export default UserProfile;