router-lists-ui/frontend/src/components/Breadcrumbs.jsx

import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { IconArrowLeft, IconFilter } from '@tabler/icons-react'

/**
 * Улучшенный компонент Breadcrumbs с поддержкой:
 * - Динамических фильтров
 * - Счетчиков результатов
 * - Кнопки "Назад" с сохранением состояния
 */
function Breadcrumbs({ items = [], showBack = false, filterInfo = null, count = null }) {
  const navigate = useNavigate()
  
  if (!Array.isArray(items) || items.length === 0) return null

  const handleBack = () => {
    navigate(-1)
  }

  return (
    <div className="d-flex align-items-center gap-2 flex-wrap">
      {/* Кнопка "Назад" */}
      {showBack && (
        <button 
          className="btn btn-ghost-secondary btn-sm btn-icon" 
          onClick={handleBack}
          title="Назад"
          aria-label="Назад"
        >
          <IconArrowLeft size={18} />
        </button>
      )}

      {/* Breadcrumbs */}
      <nav aria-label="breadcrumb">
        <ol className="breadcrumb mb-0">
          {items.map((it, idx) => {
            const isLast = idx === items.length - 1
            return (
              <li key={idx} className={`breadcrumb-item${isLast ? ' active' : ''}`} aria-current={isLast ? 'page' : undefined}>
                {it.to && !isLast ? (
                  <Link to={it.to} className="text-decoration-none">
                    {it.label}
                    {it.count !== undefined && (
                      <span className="badge bg-blue-lt text-blue ms-1">{it.count}</span>
                    )}
                  </Link>
                ) : (
                  <span>
                    {it.label}
                    {it.count !== undefined && (
                      <span className="badge bg-blue-lt text-blue ms-1">{it.count}</span>
                    )}
                  </span>
                )}
              </li>
            )
          })}
        </ol>
      </nav>

      {/* Информация о фильтрах */}
      {filterInfo && (
        <span className="badge bg-azure-lt text-azure d-inline-flex align-items-center">
          <IconFilter size={14} className="me-1" />
          {filterInfo}
        </span>
      )}

      {/* Общий счетчик */}
      {count !== null && count !== undefined && (
        <span className="text-muted small">
          ({count} {count === 1 ? 'запись' : count < 5 ? 'записи' : 'записей'})
        </span>
      )}
    </div>
  )
}

export default Breadcrumbs