import type { ReactNode } from 'react';

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

export interface PageHeaderProps {
  title: string;
  breadcrumbs?: Breadcrumb[];
  actions?: ReactNode;
  className?: string;
}

export function PageHeader({
  title,
  breadcrumbs,
  actions,
  className = '',
}: PageHeaderProps): ReactNode {
  return (
    <div className={`flex items-center justify-between mb-6 ${className}`}>
      <div>
        {breadcrumbs && breadcrumbs.length > 0 && (
          <nav
            className="flex items-center space-x-2 text-sm mb-2"
            style={{ color: 'var(--color-muted-foreground, #6b7280)' }}
            aria-label="Breadcrumb"
          >
            {breadcrumbs.map((crumb, index) => (
              <span key={index} className="flex items-center">
                {index > 0 && <span className="mx-2">/</span>}
                {crumb.href ? (
                  <a
                    href={crumb.href}
                    className="hover:opacity-80 transition-opacity"
                    style={{ color: 'var(--color-muted-foreground, #6b7280)' }}
                  >
                    {crumb.label}
                  </a>
                ) : (
                  <span>{crumb.label}</span>
                )}
              </span>
            ))}
          </nav>
        )}
        <h1 className="text-2xl font-bold" style={{ color: 'var(--color-foreground, #111827)' }}>
          {title}
        </h1>
      </div>
      {actions && <div className="flex items-center space-x-3">{actions}</div>}
    </div>
  );
}