import React from 'react';
import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';

export type PageHeaderProps = {
  /** Page title */
  title: React.ReactNode;
  /** Subtitle shown after title */
  subtitle?: React.ReactNode;
  /** Icon before title */
  icon?: React.ReactNode;
  /** Breadcrumb items */
  breadcrumbs?: BreadcrumbItem[];
  /** Breadcrumb line actions (right side of breadcrumb line) */
  breadcrumbActions?: React.ReactNode;
  /** Header actions (buttons, dropdowns on right side of page title) */
  actions?: React.ReactNode;
  /** Additional className */
  className?: string;
  /** Show breadcrumb line (default true) */
  showBreadcrumbLine?: boolean;
};

/**
 * Layout 3 page header component.
 *
 * Structure:
 * - breadcrumb-line (optional): breadcrumbs + header-elements
 * - page-header-content: page-title + header-elements with actions
 */
export function PageHeader({
  title,
  subtitle,
  icon,
  breadcrumbs,
  breadcrumbActions,
  actions,
  className = '',
  showBreadcrumbLine = true
}: PageHeaderProps) {
  return (
    <div className={`page-header ${className}`.trim()}>
      {/* Breadcrumb line */}
      {showBreadcrumbLine && breadcrumbs && (
        <div className="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
          <div className="d-flex">
            <Breadcrumbs items={breadcrumbs} className="mb-0" />
            <a href="#" className="header-elements-toggle text-default d-md-none">
              <i className="icon-more"></i>
            </a>
          </div>
          {breadcrumbActions && (
            <div className="header-elements d-none">
              <div className="breadcrumb justify-content-center">
                {breadcrumbActions}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Page header content */}
      <div className="page-header-content header-elements-md-inline">
        <div className="page-title d-flex">
          <h4>
            {icon && <span className="me-2">{icon}</span>}
            <span className="fw-semibold">{title}</span>
            {subtitle && <span> - {subtitle}</span>}
          </h4>
          <a href="#" className="header-elements-toggle text-default d-md-none">
            <i className="icon-more"></i>
          </a>
        </div>

        {actions && (
          <div className="header-elements d-none mb-3 mb-md-0">
            {actions}
          </div>
        )}
      </div>
    </div>
  );
}

export type BreadcrumbElementProps = {
  icon?: React.ReactNode;
  children: React.ReactNode;
  href?: string;
};

/**
 * Breadcrumb action element for page header.
 */
export function BreadcrumbElement({ icon, children, href = '#' }: BreadcrumbElementProps) {
  return (
    <a href={href} className="breadcrumb-elements-item">
      {icon && <span className="me-2">{icon}</span>}
      {children}
    </a>
  );
}