import React from 'react';
import type { Metadata } from 'next';
import { ExpertsFilter, ExpertsAdditionalFilter } from '../../../components/Experts';

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

export default function Experts({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
    console.log('search params', searchParams);

    return (
        <div className="page-search">
            <div className="main-find">
                <div className="b-inner">
                    <div className="main-find__top">
                        <h2 className="title-h2">Find a expert</h2>
                        <div className="open-filter">
                            <img src="/images/options-outline.svg" className="" alt="" />
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xl-3 col-lg-4 d-none d-lg-block">
                            <ExpertsFilter />
                        </div>
                        <div className="col-xl-9 col-lg-8 ">
                            <ExpertsAdditionalFilter />
                            <div className="search-result">
                                <div className="card-profile">
                                    <div className="card-profile__header">
                                        <div className="card-profile__header__portrait">
                                            <img src="/images/person.png" className="" alt="" />
                                        </div>
                                        <div className="card-profile__header__inner">
                                            <div className="card-profile__header__name">Matthew Weeks</div>
                                            <div className="card-profile__header__price">
                                                45$ <span>/ 45min</span>
                                            </div>
                                        </div>
                                    </div>
                                    <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__header">
                                        <div className="card-profile__header__portrait">
                                            <img src="/images/person.png" className="" alt="" />
                                        </div>
                                        <div className="card-profile__header__inner">
                                            <div className="card-profile__header__name">Matthew Weeks</div>
                                            <div className="card-profile__header__price">
                                                45$ <span>/ 45min</span>
                                            </div>
                                        </div>
                                    </div>
                                    <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__header">
                                        <div className="card-profile__header__portrait">
                                            <img src="/images/person.png" className="" alt="" />
                                        </div>
                                        <div className="card-profile__header__inner">
                                            <div className="card-profile__header__name">Matthew Weeks</div>
                                            <div className="card-profile__header__price">
                                                45$ <span>/ 45min</span>
                                            </div>
                                        </div>
                                    </div>
                                    <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__header">
                                        <div className="card-profile__header__portrait">
                                            <img src="/images/person.png" className="" alt="" />
                                        </div>
                                        <div className="card-profile__header__inner">
                                            <div className="card-profile__header__name">Matthew Weeks</div>
                                            <div className="card-profile__header__price">
                                                45$ <span>/ 45min</span>
                                            </div>
                                        </div>
                                    </div>
                                    <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>

                            <ul className="pagination">
                                <li className="page-item"><a className="page-link" href="#">1</a></li>
                                <li className="page-item active" aria-current="page">
                                    <a className="page-link" href="#">2</a>
                                </li>
                                <li className="page-item"><a className="page-link" href="#">3</a></li>
                                <li className="page-item"><a className="page-link" href="#">4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
