import Link from "next/link";
import styles from "./PageHeader.module.css";

export interface Fil {
  label: string;
  href?: string;
}

interface PageHeaderProps {
  titre: string;
  sousTitre?: string;
  fil: Fil[];
}

export default function PageHeader({ titre, sousTitre, fil }: PageHeaderProps) {
  return (
    <div className={styles.header}>
      <div className={styles.inner}>
        <nav className={styles.filAriane} aria-label="Fil d'Ariane">
          <Link href="/">Accueil</Link>
          {fil.map((item) => (
            <span key={item.label} className={styles.segment}>
              <span className={styles.separateur}>/</span>
              {item.href ? <Link href={item.href}>{item.label}</Link> : <span>{item.label}</span>}
            </span>
          ))}
        </nav>

        <h1 className={styles.titre}>{titre}</h1>
        {sousTitre && <p className={styles.sousTitre}>{sousTitre}</p>}
      </div>
    </div>
  );
}