// import node module libraries
import { Link } from 'react-router-dom';
import { Badge, Card, Image } from 'react-bootstrap'
import { GeoAltFill, HeartFill, PeopleFill, StarFill } from 'react-bootstrap-icons'

// import media files
import MentorSingle from 'assets/images/mentor/mentor-single.png';
import MentorImgSingle from 'assets/images/mentor/mentor-img-single.jpg';

export const UserProfile1Example = () => {
    const skills = ['Frontend', 'HTML', 'CSS', 'React', 'Javascript', 'Vuejs', 'Next.js']
    return (
        <section className='p-4 bg-light rounded-3'>
            <Card>
                <div
                    className="rounded-top-3"
                    style={{
                        backgroundImage: 'url(' + MentorSingle + ')',
                        backgroundPosition: 'center',
                        backgroundRepeat: 'no-repeat',
                        backgroundSize: 'cover',
                        height: '228px'
                    }}
                ></div>
                <Card.Body className="p-md-5">
                    <div className="d-flex flex-column gap-5">
                        <div className="mt-n8">
                            <Image src={MentorImgSingle} alt="mentor 1" className="img-fluid rounded-4 mt-n8" />
                        </div>
                        <div className="d-flex flex-column gap-5">
                            <div className="d-flex flex-column gap-3">
                                <div className="d-flex flex-md-row flex-column justify-content-between gap-2">
                                    <div>
                                        <h1 className="mb-0">Jitu Chauhan</h1>
                                        <div className="d-flex flex-lg-row flex-column gap-2">
                                            <small className="fw-medium text-gray-800">Software Engineer at Apple</small>
                                            <small className="fw-medium text-success">7+ years in UX Design & Brand Design.</small>
                                        </div>
                                    </div>
                                    <div className="d-flex flex-row gap-3 align-items-center">
                                        <Link to="#!" className="btn btn-outline-white">
                                            <span><HeartFill size={13} className="me-1" /> </span> Save
                                        </Link>
                                        <Link to="#!" className="btn btn-outline-white">Ask questions</Link>
                                    </div>
                                </div>
                                <div className="d-flex flex-md-row flex-column gap-md-4 gap-2">
                                    <div className="d-flex flex-row gap-2 align-items-center lh-1">
                                        <span><StarFill size={13} className="text-warning align-baseline" /> </span>
                                        <span> <span className="text-gray-800 fw-bold">5.0</span>(16 Reviews) </span>
                                    </div>
                                    <div className="d-flex flex-row gap-2 align-items-center lh-1">
                                        <span><PeopleFill size={13} className="text-primary align-baseline" /> </span>
                                        <span>  <span className="text-gray-800 fw-bold">40+</span>  Mentees </span>
                                    </div>
                                    <div className="d-flex flex-row gap-2 align-items-center lh-1">
                                        <span><GeoAltFill size={13} className="text-danger" /> </span>
                                        <span>Gujarat,India</span>
                                    </div>
                                </div>
                            </div>
                            <div className="d-flex flex-column gap-2">
                                <h3 className="mb-0">Skills</h3>
                                <div className="gap-2 d-flex flex-wrap">
                                    {skills.map((skill, index) => {
                                        return <Link to="#!" key={index} className="btn btn-tag btn-sm">{skill}</Link>
                                    })}
                                </div>
                            </div>
                            <div>
                                <Badge className="rounded-pill text-success-emphasis bg-success-subtle border border-success align-items-center">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-reply-fill me-1 align-text-top" viewBox="0 0 16 16">
                                            <path d="M5.921 11.9 1.353 8.62a.72.72 0 0 1 0-1.238L5.921 4.1A.716.716 0 0 1 7 4.719V6c1.5 0 6 0 7 8-2.5-4.5-7-4-7-4v1.281c0 .56-.606.898-1.079.62z" />
                                        </svg>
                                    </span>
                                    Quick Responder
                                </Badge>
                            </div>
                        </div>
                    </div>
                </Card.Body>
            </Card>
        </section>
    )
}

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';

// import custom components
import MentorCard from 'components/marketing/common/cards/MentorCard';

// import media files
import MentorImg7 from 'assets/images/mentor/mentor-img-7.jpg';

export const UserProfile2Example = () => {
    const data = [
        {
            id: 1,
            image: MentorImg7,
            mentorName: 'Andrew Lupien',
            mentorRole: 'Quality Assurance Engineer',
            company: "Microsoft",
            experience: 5,
            reviews: 12,
            ratings: 5.0,
            verified: true,
            price: 35,
            allowFreeTrial: true
        }
    ]
    return (
        <section className="py-6 bg-light">
            <Container>
                <Row>
                    <Col xxl={3} xl={4} md={6} xs={12}>
                        <MentorCard mentor={data[0]} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

// import node module libraries
import { Container, Image, Row, Col } from 'react-bootstrap';

// import media files
import InstructorImg from 'assets/images/instructor/instructor-img.png';

export const UserProfile3Example = () => {
    return (
        <section className="py-8 py-lg-18 bg-white">
            <Container>
                <Row className="mb-6 align-items-center justify-content-center">
                    <Col md={10}>
                        <Row className="align-items-center ">
                            <Col xl={6} md={12} sm={12} lg={7} className="text-center text-lg-start order-1 " >
                                <span className="text-primary mb-3 d-block text-uppercase fw-semi-bold ls-xl">
                                    YOUR INSTRUCTOR
                                </span>
                                <h2 className="mb-2 display-4 fw-bold mb-3">
                                    Hi, I’m <span className="text-primary">James Davies</span>, <br />I will be taking you through lessons.
                                </h2>
                                <p className="fs-3 pe-6">
                                    Create beautiful website with this Geeks UI template. Get started building a site today.
                                </p>
                                <hr className="my-5" />
                                <Row>
                                    <Col className="col-sm mb-3 mb-lg-0">
                                        <h2 className="h1 fw-bold mb-0 ls-xs">45</h2>
                                        <p className="mb-0">Lessons</p>
                                    </Col>
                                    <Col lg={5} className="col-sm mb-3 mb-lg-0">
                                        <h2 className="h1 fw-bold mb-0 ls-xs">10,500+</h2>
                                        <p className="mb-0">Students</p>
                                    </Col>
                                    <Col className="col-sm mb-3 mb-lg-0">
                                        <h2 className="h1 fw-bold mb-0 ls-xs">12+</h2>
                                        <p className="mb-0">Learning Hours</p>
                                    </Col>
                                </Row>
                            </Col>
                            <Col xl={{ span: 5, offset: 1 }} md={12} sm={12} lg={{ span: 5, order: 2 }} className="mb-6 mb-lg-0 text-center "  >
                                <Image src={InstructorImg} alt="" className="img-fluid" />
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';

// import custom components
import StudentEnrolledCard from 'components/marketing/common/cards/StudentEnrolledCard';

// import media files
import Avatar3 from 'assets/images/avatar/avatar-3.jpg';

export const UserProfile4Example = () => {
    const data = [
        {
            id: 1,
            name: 'Wade Warren',
            image: Avatar3,
            locations: 'United States',
            joined: '7 July, 2020',
            progress: 10,
        }
    ]
    return (
        <section className="py-6 bg-light rounded-3">
            <Container>
                <Row>
                    <Col xxl={3} xl={4} md={6} xs={12}>
                        <StudentEnrolledCard student={data[0]} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';

// import custom components
import StudentInstructorInfoCard from 'components/marketing/common/cards/StudentInstructorInfoCard';

// import media files
import Avatar1 from 'assets/images/avatar/avatar-1.jpg';

export const UserProfile5Example = () => {
    const data = [
        {
            id: 1,
            name: 'Jenny Wilson',
            image: Avatar1,
            topic: 'Front-end Developer, Designer',
            courses: 6,
            students: 50274,
            rating: 4.6
        }
    ];
    return (
        <section className="py-6 bg-light rounded-3">
            <Container>
                <Row>
                    <Col xxl={4} xl={4} md={6} xs={12}>
                        <StudentInstructorInfoCard instructor={data[0]} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

// import node module libraries
import { Container } from 'react-bootstrap';

// import custom components
import ProfileCover from 'components/marketing/common/headers/ProfileCover';

// import media files
import Avatar1 from 'assets/images/avatar/avatar-1.jpg';

export const UserProfile6Example = () => {
    const dashboardData = {
        avatar: Avatar1,
        name: 'Jenny Wilson',
        username: '@Jennywilson',
        linkname: 'Create New Course',
        link: '/marketing/instructor/add-new-course/',
    };
    return (
        <section className="py-3 bg-light rounded-3">
            <Container fluid>
                <ProfileCover dashboardData={dashboardData} />
            </Container>
        </section>
    )
}

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';

// import custom components
import InstructorProfileSummaryCard from 'components/marketing/common/cards/InstructorProfileSummaryCard';

// import media files
import Avatar1 from 'assets/images/avatar/avatar-1.jpg';

export const UserProfile7Example = () => {
    const data = {
        id: 1,
        name: 'Jenny Wilson',
        image: Avatar1,
        designation: 'Front-end Developer, Designer',
        rating: 4.5,
        reviews: 12230,
        students: 11604,
        courses: 32,
        verified: true,
        link: '/marketing/instructor/profile',
        about: 'I am an Innovation designer focussing on UX/UI based in Berlin. As a creative resident at Figma explored the city of the future and how new technologies.'
    };
    return (
        <section className="py-6 bg-light rounded-3">
            <Container>
                <Row>
                    <Col xxl={5} xl={5} md={6} xs={12}>
                        <InstructorProfileSummaryCard data={data} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}