import React from 'react'
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
import { TiHomeOutline } from 'react-icons/ti'

export default function BreadcrumbCom({title, paths}) {
  return (
    <div className='w-full py-4 flex justify-between items-center'>
        <h1 className='text-3xl text-black font-semibold'>{title}</h1>
        <div className='flex gap-2 items-center text-black-gray text-base'>
            <TiHomeOutline />
            {paths.map((item, index) => (
              <>
                <MdKeyboardDoubleArrowRight />
                <p className={`${index + 1 == paths.length ? 'text-primary' : ''}`}>{item}</p>
              </>
            ))}
        </div>
    </div>
  )
}