'use client';

import React from 'react';
import { List, Tag } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import Image from 'next/image';
import { Link } from '../../navigation';
import { Locale } from '../../types/locale';
import { ExpertsData } from '../../types/experts';

export const ExpertsList = ({ data, locale }: { data: ExpertsData, locale: string }) => {
    const isRus = locale === Locale.ru;

    return (
        <List
            itemLayout="vertical"
            size="large"
            className="search-result"
            dataSource={data}
            renderItem={(item) => (
                <List.Item key={item?.id} className="card-profile">
                    <List.Item.Meta
                        className="card-profile__header"
                        avatar={(
                            <div className="card-profile__header__portrait">
                                <Image src={item?.faceImageUrl || '/images/person.png'} width={100} height={100} alt="" />
                            </div>
                        )}
                        description={(
                            <div className="card-profile__header__inner">
                                <Link href={`/experts/${item?.id}` as any}>
                                    <div className="card-profile__header__name">{`${item.name} ${item?.surname || ''}`}</div>
                                </Link>
                                <div className="card-profile__header__price">
                                    {`${item?.sessionCost}${isRus ? '₽' : '€'}`} <span>/ {`${item?.sessionDuration}${isRus ? 'мин' : 'min'}`}</span>
                                </div>
                            </div>
                        )}
                    />
                    <div className="card-profile__skills">
                        <div className="skills__list">
                            {item?.tags?.slice(0, 2).map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
                            {item?.tags?.length > 2
                                ? (
                                    <Tag className="skills__list__more">
                                        <Link href={`/experts/${item?.id}` as any}>
                                            {`+${item?.tags?.length - 2}`}
                                        </Link>
                                    </Tag>
                                ) : null}
                        </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={`/experts/${item?.id}` as any}>
                            Details
                            <RightOutlined style={{ fontSize: '10px', padding: '0 7px' }}/>
                        </Link>
                    </div>
                </List.Item>
            )}
        />
    );
};