import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;}
.nbl-page-header__titles{display:flex;flex-direction:column;gap:4px;min-width:0;}
.nbl-page-header__title{font-family:var(--font-sans);font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--text-strong);margin:0;line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);}
.nbl-page-header__subtitle{font-size:var(--text-base);color:var(--text-muted);margin:0;line-height:var(--leading-normal);}
.nbl-page-header__actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
`;

inject('nbl-page-header-css', css);

export interface PageHeaderProps {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  actions?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export function PageHeader({ title, subtitle, actions, className = '', style }: PageHeaderProps) {
  inject('nbl-page-header-css', css);
  const cls = ['nbl-page-header', className].filter(Boolean).join(' ');

  return (
    <div className={cls} style={style}>
      <div className="nbl-page-header__titles">
        <h1 className="nbl-page-header__title">{title}</h1>
        {subtitle && <p className="nbl-page-header__subtitle">{subtitle}</p>}
      </div>
      {actions && <div className="nbl-page-header__actions">{actions}</div>}
    </div>
  );
}