'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 { ExpertsData } from '../../types/experts';

type ExpertListProps = {
    data: ExpertsData;
    priceTitle: string;
    durationTitle: string;
    detailButton: string;
};

export const ExpertsList = ({
    data,
    priceTitle,
    durationTitle,
    detailButton
}: ExpertListProps) => {
    const getTitle = (str: string, value?: any): string => (value ? str.replace('0', value) : str);

    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">
                                    {getTitle(priceTitle, item?.sessionCost)} <span>/ {getTitle(durationTitle, item?.sessionDuration)}</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}>
                            {detailButton}
                            <RightOutlined style={{ fontSize: '10px', padding: '0 7px' }}/>
                        </Link>
                    </div>
                </List.Item>
            )}
        />
    );
};