import type { FC } from "react";
import { Link } from "react-router";

interface BreadItem {
  href?: string;
  label: string;
}

interface IBreadcrumbsProps {
  items: BreadItem[];
  className?: string;
}

const Breadcrumbs: FC<IBreadcrumbsProps> = ({ items, className }) => {
  return (
    <div
      className={`${className ? `${className} ` : ""} flex flex-row p-1 sm:p-3 gap-3 items-center text-gray-800 dark:text-gray-200 text-sm sm:text-base`}
    >
      {items.map((item, index) => (
        <>
          {item.href ? (
            <Link to={item.href}>
              <p className="text-blue-500">{item.label}</p>
            </Link>
          ) : (
            <p>{item.label}</p>
          )}
          {index + 1 < items.length && <p className="text-gray-500">/</p>}
        </>
      ))}
    </div>
  );
};

export default Breadcrumbs;
