import { Link } from 'react-router-dom'
import './PageHeader.css'

type Crumb = { label: string; to?: string }

type PageHeaderProps = {
  icon: string
  iconAlt?: string
  placeholder: string
  secondary: string
  primary: string
  crumbs: Crumb[]
  fluid?: boolean
}

export default function PageHeader({
  icon,
  iconAlt = '',
  placeholder,
  secondary,
  primary,
  crumbs,
  fluid = false,
}: PageHeaderProps) {
  return (
    <div className={`page-header max-container${fluid ? ' max-container--fluid' : ''}`}>
      <div className="page-header__title-row">
        <img src={icon} alt={iconAlt} className="page-header__icon" width={115} />
        <div className="text-start texts--separated size-md">
          <div className="header-title">
            <p className="header-title__placeholder">{placeholder}</p>
            <div className="header-title--top">
              <p className="header-title__secondary">{secondary}</p>
              <p className="header-title__primary">{primary}</p>
            </div>
          </div>
        </div>
      </div>

      <nav className="page-header__breadcrumbs" aria-label="مسیر صفحه">
        <ol>
          {crumbs.map((crumb, index) => (
            <li key={crumb.label}>
              {index > 0 && (
                <span className="page-header__breadcrumbs-divider" aria-hidden="true">
                  /
                </span>
              )}
              {crumb.to ? (
                <Link to={crumb.to}>{crumb.label}</Link>
              ) : (
                <span className="page-header__breadcrumbs-current">{crumb.label}</span>
              )}
            </li>
          ))}
        </ol>
      </nav>
    </div>
  )
}
