import React from "react";
import { useNavigate } from "react-router-dom";

const Breadcrumb = ({ data }) => {
  const navigate = useNavigate();

  return (
    <nav aria-label="breadcrumb">
      <ol className="breadcrumb breadcrumb-custom-icon">
        {data.map((item, index) => (
          item.link ? (
            <li className="breadcrumb-item cursor-pointer" key={index}>
              <a
                role="button"
                tabIndex={0}
                aria-label="breadcrumb link"
                onClick={() => navigate(item.link)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') navigate(item.link);
                }}
              >
                {item.label}
              </a>
              <i className="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
            </li>
          ) : (
            <li className="breadcrumb-item active" key={index}>
              {item.label}
            </li>
          )
        ))}
      </ol>
    </nav>
  );
};

export default Breadcrumb;
