import { useLocalizedName } from "@/shared/common/localizedName";
import { ChevronRight } from "lucide-react";
import type { FC } from "react";

interface BreadcrumbItem {
  id: string;
  name: { am: string; en: string };
}

interface BreadcrumbProps {
  breadcrumb: BreadcrumbItem[];
  hasTeamMembers: boolean;
}

export const Breadcrumb: FC<BreadcrumbProps> = ({
  breadcrumb,
  hasTeamMembers,
}) => {
  const localizedName = useLocalizedName();
  return (
    <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4 overflow-x-auto">
      <span className="font-medium text-gray-700 dark:text-gray-300">User Management</span>

      {breadcrumb.map((item, index) => (
        <div key={item.id} className="flex items-center">
          <ChevronRight className="h-4 w-4 mx-2 flex-shrink-0 text-gray-400 dark:text-gray-500" />
          <span
            className={
               index === breadcrumb.length - 1 ? "font-medium text-gray-800 dark:text-gray-200" : ""
            }
          >
            {localizedName(item.name)}
          </span>
        </div>
      ))}

      {hasTeamMembers && (
        <div className="flex items-center">
          <ChevronRight className="h-4 w-4 mx-2 flex-shrink-0 text-gray-400 dark:text-gray-500" />
          <span className="font-medium text-gray-800 dark:text-gray-200">Team Members</span>
        </div>
      )}
    </div>
  );
};
