import type { PropsWithChildren, ReactNode } from 'react';

type Props = PropsWithChildren<{
  title: string;
  /** توضیح فارسی «این صفحه چیست و چه کاری انجام می‌دهد». */
  description?: ReactNode;
  icon?: string;
}>;

/** هدر استاندارد صفحه: آیکون + عنوان + توضیح + جای دکمه‌ها. */
export function PageHeader({ title, description, icon, children }: Props) {
  return (
    <section className="page-header">
      <div className="page-header-body">
        {icon && (
          <span className="page-header-icon">
            <i className={`bi ${icon}`} aria-hidden="true" />
          </span>
        )}
        <div>
          <h2>{title}</h2>
          {description && <p>{description}</p>}
        </div>
      </div>
      {children && <div className="page-header-actions">{children}</div>}
    </section>
  );
}