import classNames from 'classnames'
import Link from 'next/link'
import React from 'react'

interface Props {
    links: any
    pageNumber: (url: any) => void
    url: string
    multipleParams?: boolean
    stats?: any
}

export default function TablePagination({links, pageNumber, url, multipleParams, stats}: Props) {
    return (

        <div
            className='md:flex justify-center items-center space-x-3 pt-3 text-color text-center overflow-auto custom-scrollbar'>
            {stats ?
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-1 md:mb-0">Showing {stats.from} to {stats.to} of {stats.total} entries</p>
                : null
            }
            <ul className="inline-flex -space-x-px text-sm">
                {links.map((link: any, index: any) => (
                    <li key={index}>
                        {!link.url ? (
                            <span
                                className={`flex items-center justify-center px-3 h-8 leading-tight border-gray-300 border ${link.active ?
                                    'bg-blue-50 hover:bg-blue-100 dark:hover:bg-gray-700 hover:text-blue-700 dark:hover:text-gray-950 dark:bg-slate-900 dark:border-slate-900' :
                                    'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-slate-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'} ${link.label === '&laquo; Previous' ? 'rounded-s-lg' : link.label === 'Next &raquo;' ? 'rounded-e-lg' : ''}`}
                            >
                                {link.label === '&laquo; Previous' ? 'Previous' : link.label === 'Next &raquo;' ? 'Next' : link.label}
                            </span>
                        ) : (
                            <Link
                                href={`${url}${multipleParams ? '&' : '/?'}page=${pageNumber(link.url)}`}
                                className={`flex items-center justify-center px-3 h-8 leading-tight border-gray-300 border ${link.active ?
                                    'bg-blue-50 hover:bg-blue-100 dark:hover:bg-gray-700 hover:text-blue-700 dark:hover:text-gray-950 dark:bg-gray-800/50 dark:border-slate-900' :
                                    'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-slate-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'} ${link.label === '&laquo; Previous' ? 'rounded-s-lg' : link.label === 'Next &raquo;' ? 'rounded-e-lg' : ''}`}
                            >
                                {link.label === '&laquo; Previous' ? 'Previous' : link.label === 'Next &raquo;' ? 'Next' : link.label}
                            </Link>
                        )}
                    </li>
                ))}
            </ul>
        </div>

    )
}