'use client'

import React from 'react'
import Link from 'next/link'
import { IoIosArrowForward } from 'react-icons/io'

export type BreadCrumbItem = {
  title: string
  href?: string
  loading?: boolean
}

type BreadCrumbProps = {
  items: BreadCrumbItem[]
  className?: string
}

const BreadCrumb: React.FC<BreadCrumbProps> = ({ items, className }) => {
  return (
    <nav
      className={`${className ? className : ''} text-sm text-neutral-400 bg-neutral-50 w-fit py-2 px-3 rounded-lg flex items-center gap-2 mb-5 max-md:w-full max-md:gap-1 max-sm:text-xs max-sm:flex-wrap dark:bg-darkbg max-lg:hidden
      `}
    >
      {items.map((item, index) => (
        <React.Fragment key={index}>
          {index > 0 && (
            <IoIosArrowForward className="rtl:rotate-180 shrink-0" />
          )}
          {item.loading ? (
            <div className="h-4 bg-neutrals100 dark:bg-background rounded w-20 animate-pulse" />
          ) : item.href ? (
            <Link
              href={item.href}
              className="capitalize leading-6 inline-block hover:text-[#04196c] dark:hover:text-[#3a60f8]"
            >
              {item.title}
            </Link>
          ) : (
            <span className="capitalize leading-6 inline-block text-[#04196c] font-semibold dark:text-[#3a60f8]">
              {item.title}
            </span>
          )}
        </React.Fragment>
      ))}
    </nav>
  )
}

export default BreadCrumb