import { FC } from 'react';

type BreadcrumbProps = {
  crumbs: {
    label: string;
    onClick?: () => void;
  }[];
};

const Breadcrumb: FC<BreadcrumbProps> = ({ crumbs }) => {
  return (
    <div className="h-8 min-h-8 w-full flex flex-col justify-center gap-1 bg-white p-2 text-sm text-black/90 font-bold font-medium dark:text-white/90">
      <div className="flex flex-row items-center">
        {crumbs.map((crumb, i) => (
          <div key={crumb.label}>
            {i !== crumbs.length - 1 ? (
              <div
                className="flex flex-row cursor-pointer items-center text-black/60"
                onClick={crumb.onClick}
              >
                {crumb.label}
                <div className="px-1">/</div>
              </div>
            ) : (
              <div className="flex flex-row items-center gap-2">
                {crumb.label}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Breadcrumb;
