import { Card, Avatar, Typography, Descriptions } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Title } = Typography;

const Profile = () => {
  return (
    <Card>
      <div style={{ textAlign: 'center', marginBottom: '24px' }}>
        <Avatar size={64} icon={<UserOutlined />} />
        <Title level={3} style={{ marginTop: '16px' }}>John Doe</Title>
      </div>
      <Descriptions bordered>
        <Descriptions.Item label="Username">johndoe</Descriptions.Item>
        <Descriptions.Item label="Email">john@example.com</Descriptions.Item>
        <Descriptions.Item label="Role">Administrator</Descriptions.Item>
        <Descriptions.Item label="Status">Active</Descriptions.Item>
        <Descriptions.Item label="Join Date">2023-10-25</Descriptions.Item>
      </Descriptions>
    </Card>
  );
};

export default Profile;