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

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