'use client';

import React from 'react';
import { Avatar, List, Typography, Tag } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { Link } from '../../../../navigation';
import { ExpertsFilter, ExpertsAdditionalFilter } from '../../../../components/Experts';

const { Text } = Typography;

const data = Array.from({ length: 10 }).map((_, i) => ({
    href: '/',
    name: 'Matthew Weeks',
    avatar: '/images/person.png',
    duration: '45min',
    price: '45$',
    skills: ['Engineering & Data', 'Soft skills', 'Interview'],
    speciality: 'Senior Software Engineer',
    specialityDesc: 'Auth0',
    description: '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 …'
}));

export default function Experts() {
    const expertsList = (
        <List
            itemLayout="vertical"
            size="large"
            pagination={{
                className: 'pagination',
                onChange: (page) => {
                    console.log(page);
                },
                pageSize: 5
            }}
            dataSource={data}
            renderItem={(item) => (
                <List.Item key={item.name}>
                    <List.Item.Meta
                        avatar={<Avatar src={item.avatar} />}
                        title={item.name}
                        description={(
                            <div className="card-profile__header__price">
                                {item.price} <span>/ {item.duration}</span>
                            </div>
                        )}
                    />
                    <div className="card-profile__skills">
                        <div className="skills__list">
                            {item.skills.map((skill) => <Tag color="#f50">{skill}</Tag>)}
                            <div className="skills__list__item">Engineering & Data</div>
                            <div className="skills__list__more">+6</div>
                        </div>
                    </div>
                    <div className="card-profile__title">{item.speciality}</div>
                    <div className="card-profile__subtitle">{item.specialityDesc}</div>
                    <div className="card-profile__desc">{item.description}</div>
                    <div className="card-profile__footer">
                        <Link href={item.href as any}>
                            <Text
                                copyable={{
                                    icon: <RightOutlined key="copy-icon" style={{ fontSize: '15px' }}/>,
                                    onCopy: undefined,
                                    tooltips: false
                                }}
                            >
                                Details
                            </Text>
                        </Link>
                    </div>
                </List.Item>
            )}
        />
    );

    return (
        <div className="main-find">
            <div className="b-inner">
                <div className="main-find__top">
                    <h2 className="title-h2">Find an 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>
                            {expertsList}
                        </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>
    );
};
