import React from "react";
import "./page-header-styles.scss";
import { ButtonProps } from "@app/models/components";
import Button from "../button/Button";

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

export interface PageHeaderProps {
  title: string;
  subtitle?: string | React.ReactNode;
  actionButtons?: ButtonProps[];
  breadcrumb?: PageHeaderBreadcrumbItem[];
}

const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  subtitle = "",
  actionButtons = [],
  breadcrumb = [],
}) => {
  return (
    <div className="pageHeader-container">
      {!!breadcrumb.length && (
        <nav className="pageHeader-breadcrumb" aria-label="Breadcrumb">
          {breadcrumb.map((item, index) => (
            <React.Fragment key={index}>
              {index > 0 && <span aria-hidden="true">/</span>}
              {item.href ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}
            </React.Fragment>
          ))}
        </nav>
      )}
      <div className="pageHeader-root">
        <div className="pageHeader-info">
          <h2>{title}</h2>
          {subtitle && <p>{subtitle}</p>}
        </div>
        {!!actionButtons.length && (
          <div className="pageHeader-actionButtons">
            {actionButtons.map((buttonProps, index) => (
              <Button key={index} {...buttonProps} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default PageHeader;