import React from 'react'
import BackButton from '@/components/shared/back-button'
import Link from 'next/link'
import { Breadcrumb } from '@/utils/types'

const Breadcrumbs = ({ items }: { items?: Array<Breadcrumb> }) => {

    return (
        <div className='flex text-sm gap-1'>
            {
                items?.map((item: Breadcrumb, i: number) => (
                    <div className='flex items gap-1'>
                        <Link href={item.href}>{item.name}</Link>
                        {i + 1 < items?.length && ">"}
                    </div>
                ))
            }
        </div>
    )
}

const Titlebar = ({ back, title, breadcrumbs }: { back?: boolean, title: string, breadcrumbs?: Array<Breadcrumb> }) => {
    return (

        <div className='flex items-center gap-3 md:text-2xl text-lg mb-5'>
            {back && <BackButton />}
            <div>
                {title}
                <Breadcrumbs items={breadcrumbs} />
            </div>
        </div>
    )
}

export default Titlebar;