import React from 'react';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { Link } from '../../../../navigation';

export const metadata: Metadata = {
    title: 'Bbuddy - Experts item',
    description: 'Bbuddy desc experts'
};

export function generateStaticParams() {
    return [{ expertId: '1' }, { expertId: '2' }];
}

export default function ExpertItem({ params }: { params: { expertId: string } }) {
    if (!params?.expertId) notFound();

    return (
        <div className="b-page">
            <div className="b-inner">
                <div className="b-page__back">
                    <Link href={'/experts' as any} className="btn-back">
                        <img src="/images/arrow-back.svg" className="" alt="" />
                        Back to experts list
                    </Link>
                </div>
                <div className="expert-card">
                    <div className="expert-card__wrap">
                        <div className="expert-card__avatar">
                            <img src="/images/person.png" className="" alt="" />
                        </div>
                        <div className="expert-card__inner">
                            <h1 className="expert-card__title">{`Matthew Weeks | id ${params.expertId}`}</h1>
                            <div className="expert-card__info">
                                <span>12 Practice hours</span>
                                <i>|</i>
                                <span>15 Supervision per year</span>
                            </div>
                            <div className="expert-card__rating">
                                <img src="/images/stars.svg" className="" alt="" />
                                    <span>4/5 (out of 345)</span>
                            </div>
                        </div>
                    </div>
                    <div className="expert-card__wrap-btn">
                        <a href="#" className="btn-apply">
                            <img src="/images/calendar-outline.svg" className="" alt="" />
                                Schedule
                        </a>
                        <a href="#" className="btn-video">
                            <img src="/images/videocam-outline.svg" className="" alt="" />
                                Video
                        </a>
                    </div>
                </div>
                <h2 className="title-h2">Current Offer</h2>
                <div className="skills__list">
                    <div className="skills__list__item">Engineering &amp; Data</div>
                    <div className="skills__list__item">Communication</div>
                    <div className="skills__list__item">Communication</div>
                </div>
                <p className="base-text">
                    Hello, my name is Marcelo. I am a Senior UX Designer with more than 6 years of experience working
                    with the largest companies in the world such as Disney, Globant and currently IBM.
                    During my career, I have helped organizations solve complex problems using aesthetically pleasing
                    designs with design while building teams and mentoring other designers.
                    I can help you: <br />
                    Prepare for interviews, prepare your resume or CV and work on your LinkedIn profile <br />
                    Get ready for whiteboard challenges and take-home exercises <br />
                    Create a great portfolio and case study presentation. <br />
                    Provide industry information. <br />
                    Professional orientation <br />
                    Strategic thinking <br /><br />

                    Oh, and I also speak Spanish!
                </p>
                <div className="wrap-btn-prise">
                    <a href="#" className="btn-apply">
                        Sign Up Now
                    </a>
                    <div className="wrap-btn-prise__text">
                        45$ <span> / 45min</span>
                    </div>
                </div>
                <h2 className="title-h2">Expert Background</h2>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <h3 className="title-h3">Education</h3>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <div className="sertific">
                    <img src="/images/sertific.png" className="" alt="" />
                </div>
                <h3 className="title-h3">Professional Certification</h3>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <h3 className="title-h3">Trainings | Seminars | Courses</h3>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <h3 className="title-h3">MBA Information</h3>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <h3 className="title-h3">Managerial Experience</h3>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <h3 className="title-h3">Entrepreneurial Experience</h3>
                <p className="base-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                    malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                </p>
                <h3 className="title-h3">Successful Cases From Practice</h3>
                <div className="case-list">
                    <div className="skills__list">
                        <div className="skills__list__item">Engineering &amp; Data</div>
                        <div className="skills__list__item">Communication</div>
                        <div className="skills__list__item">Communication</div>
                    </div>
                    <p className="base-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                        malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                    </p>
                </div>
                <div className="case-list">
                    <div className="skills__list">
                        <div className="skills__list__item">Engineering &amp; Data</div>
                        <div className="skills__list__item">Communication</div>
                        <div className="skills__list__item">Communication</div>
                    </div>
                    <p className="base-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                        malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                    </p>
                </div>
                <h2 className="title-h2">All Offers by this Expert</h2>
                <div className="offers-list">
                    <div className="card-profile">
                        <div className="card-profile__skills">
                            <div className="skills__list">
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__more">+6</div>
                            </div>
                        </div>
                        <div className="card-profile__title">Senior Software Engineer</div>
                        <div className="card-profile__subtitle">Auth0</div>
                        <div className="card-profile__desc">
                            I have worked across a variety of organizations, lead teams, and delivered quality software
                            for 8 years. In that time I've worked as an independent consultant, at agencies as a team
                            lead, and as a senior engineer at Auth0. I also host a podcast
                            https://anchor.fm/work-in-programming where I break down how …
                        </div>
                        <div className="card-profile__footer">
                            <a href="#">Details
                                <img className="" src="/images/chevron-forward.svg" alt="" />
                            </a>
                        </div>
                    </div>
                    <div className="card-profile">
                        <div className="card-profile__skills">
                            <div className="skills__list">
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__more">+6</div>
                            </div>
                        </div>
                        <div className="card-profile__title">Senior Software Engineer</div>
                        <div className="card-profile__subtitle">Auth0</div>
                        <div className="card-profile__desc">
                            I have worked across a variety of organizations, lead teams, and delivered quality software
                            for 8 years. In that time I've worked as an independent consultant, at agencies as a team
                            lead, and as a senior engineer at Auth0. I also host a podcast
                            https://anchor.fm/work-in-programming where I break down how …
                        </div>
                        <div className="card-profile__footer">
                            <a href="#">Details
                                <img className="" src="/images/chevron-forward.svg" alt="" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
