'use client'

import React from 'react'

import {usePathname} from 'next/navigation'


const pathToBreadCrumbs = (path: string) => {
    const mapping: Record<string, string> =  {
        '/' : 'Kezdőlap',
        'about' : 'Rólam',
        'services' : 'Szolgáltatásaim',
        'prices' : 'Áraim',
        'faq' : 'GYIK',
    }
    if ( mapping.hasOwnProperty(path)){
        return mapping[path];
    }
    return path;
}

const NextBreadcrumb = () => {

    const paths = usePathname()
    const pathNames = paths.split('/').filter( path => path )




    return (
        <div className="btn_wrapper">
            <span className="sub_home_span">{pathToBreadCrumbs( "/" )} </span>
            {
                pathNames.map((value) => {

                    return (
                        <React.Fragment key={value}>
                            <i className="fa-solid fa-angles-right" aria-hidden="true"></i>
                            <span className="sub_span">{pathToBreadCrumbs( value )}</span>
                        </React.Fragment>
                    )
                })
            }
        </div>
        // <div>
        //     <ul className={containerClasses}>
        //         <li className={listClasses}><Link href={'/'}>{homeElement}</Link></li>
        //         {pathNames.length > 0 && separator}
        //         {
        //             pathNames.map( (link, index) => {
        //                 let href = `/${pathNames.slice(0, index + 1).join('/')}`
        //                 let itemClasses = paths === href ? `${listClasses} ${activeClasses}` : listClasses
        //                 let itemLink = capitalizeLinks ? link[0].toUpperCase() + link.slice(1, link.length) : link
        //                 return (
        //                     <React.Fragment key={index}>
        //                         <li className={itemClasses} >
        //                             <Link href={href}>{itemLink}</Link>
        //                         </li>
        //                         {pathNames.length !== index + 1 && separator}
        //                     </React.Fragment>
        //                 )
        //             })
        //         }
        //     </ul>
        // </div>
    )
}

export default NextBreadcrumb