import React from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Icon } from '../shared/Icon';

interface BreadcrumbProps {
  items: { label: string; href?: string }[];
}

const Breadcrumbs: React.FC<BreadcrumbProps> = ({ items = [] }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const path = location.pathname;

  if (!items.length) {
    return null; // Optionally return nothing or a placeholder if items are empty
  }
  return (
    <nav aria-label='breadcrumb'>
      <ol
        className='breadcrumb'
        style={{
          backgroundColor: '#e9ecef', // Light gray background
          padding: '0.75rem 1rem',
          borderRadius: '0.375rem', // Rounded corners for a modern look
          height: '38px',
        }}
      >
        <Icon
          iconName='PersonRolodex' // Use the icon name for the back arrow
          style={{
            fontSize: '25px',
            color: path === '/roster' ? '#6c757d' : '#007bff',
            marginLeft: '6px',
            marginTop: '-5px',
            cursor: path === '/roster' ? 'default' : 'pointer',
            //marginRight: '5px', // Add some space between the icon and the text
          }}
          onClick={() => navigate('/roster')}
        />
        {items.map((item, index) => (
          <li
            key={index}
            className={`breadcrumb-item ${index === items.length - 1 ? 'active' : ''}`}
            style={{
              color: index === items.length - 1 ? '#6c757d' : '#007bff', // Active item in gray, others in blue
              cursor: index === items.length - 1 ? 'default' : 'pointer', // No pointer cursor for active
              marginLeft: index === 0 ? '20px' : '0px',
              marginTop: '-5px',
            }}
          >
            {index === items.length - 1 ? (
              item.label
            ) : (
              <Link to={item.href || '#'} style={{ color: '#007bff' }}>
                {item.label}
              </Link>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
};

export default Breadcrumbs;