'use client';

import React from 'react';
import { DEFAULT_PAGE_SIZE } from '../../constants/common';
import {Languages, SearchData} from "../../types/tags";
import {BlogPost} from "../../types/blogPost";
import Link from "next/link";
import {CustomPagination} from "../view/CustomPagination";

type Props = {
    searchData?: SearchData;
    languages?: Languages;
    basePath: string;
    locale: string;
    data: BlogPost[],
    total: number,
    pageSize: number
};

export const BlogPostsList =  ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_SIZE, data = [], total= 0 }: Props) => {
    const currentPage = 1
    const onChangePage = (page: number) => {
        router.push(page === 1 ? basePath : basePath+'?page='+page);
    };

    return (
        <div className="b-news__result-list">
            <div className="b-inner">
                <div className="news-list">
                    {data.map((item, i) => (
                        <li key={'blog'+i} className="list-sidebar__item">
                            <Link href={`/${locale}/blog/${item.slug}`} className="news-item">
                                <div className="news-item__image">
                                    <img className="" src={item.listImage?.src} alt={item.listImage?.alt}/>
                                </div>
                                <div className="news-item__inner">
                                    <div className="">
                                        <div className="news-item__title">
                                            {item.title}
                                        </div>
                                        <div className="news-item__badge">{item.category}</div>
                                        <div className="news-item__text">
                                            {item.excerpt}
                                        </div>
                                    </div>
                                    <div className="news-item__info">
                                        <Link href={`/${locale}/experts/${item.author?.expertId}`} className="news-item">
                                        <div className="news-item__info__author">
                                            <img className="" src={item.author.avatar.src} alt=""/>
                                            <div className="news-item__info__author__inner">
                                                <div className="news-item__info__name">{item.author.name}</div>
                                                <div className="news-item__info__date">{item.createdAt}</div>
                                            </div>
                                        </div>
                                        </Link>
                                        <div className="news-item__info__counter">
                                            <div className="news-item__info__like">
                                                <img className="" src="/images/heart-outline.svg" alt=""/>
                                                165
                                            </div>
                                            <div className="news-item__info__share">
                                                <img className="" src="/images/share-social.svg" alt=""/>
                                                Share
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        </li>
                    ))}
                </div>
                {total > pageSize && (
                    <CustomPagination
                        total={total}
                        pageSize={pageSize}
                        onChange={onChangePage}
                        current={currentPage}
                    />)}
            </div>
        </div>
    )
}