"use client";

import { useRouter } from "next/navigation";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import Button from "./Button";
import styles from "./PageHeader.module.css";

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  breadcrumb?: BreadcrumbItem[];
  actions?: React.ReactNode;
  onBack?: (() => void) | true;
}

export default function PageHeader({ title, subtitle, breadcrumb, actions, onBack }: PageHeaderProps) {
  const router = useRouter();

  return (
    <div className={styles.header}>
      <div className={styles.left}>
        {breadcrumb && breadcrumb.length > 0 && (
          <nav className={styles.breadcrumb} aria-label="Fil d'Ariane">
            {breadcrumb.map((item, i) => (
              <span key={i} className={styles.breadcrumbItemWrap}>
                {item.href ? (
                  <Link href={item.href} className={styles.breadcrumbItem}>
                    {item.label}
                  </Link>
                ) : (
                  <span className={styles.breadcrumbCurrent}>{item.label}</span>
                )}
                {i < breadcrumb.length - 1 && <span className={styles.breadcrumbSep}>/</span>}
              </span>
            ))}
          </nav>
        )}
        <div className={styles.titleRow}>
          {onBack && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              icon={ArrowLeft}
              className={styles.backButton}
              onClick={() => (onBack === true ? router.back() : onBack())}
              aria-label="Retour"
              title="Retour"
            />
          )}
          <h1 className={styles.title}>{title}</h1>
        </div>
        {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
      </div>

      {actions && <div className={styles.actions}>{actions}</div>}
    </div>
  );
}