import React from 'react';
import { NotificationCenter } from './NotificationCenter.tsx';

interface PageHeaderProps {
    title: string;
    description?: string;
    children?: React.ReactNode;
}

export const PageHeader: React.FC<PageHeaderProps> = ({ title, description, children }) => {
    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center mb-4 sm:mb-6">
            <div>
                <h2 className="text-xl sm:text-2xl font-bold text-gray-900 uppercase">{title}</h2>
                {description && <p className="text-gray-500 text-xs uppercase font-bold mt-1">{description}</p>}
            </div>
            <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
                {children}
            </div>
        </div>
    );
};