import type { ReactNode } from 'react';

interface PageHeaderProps {
    title: string;
    subtitle: string;
    children?: ReactNode;
}

export function PageHeader({ title, subtitle, children }: PageHeaderProps) {
    return (
        <header className="flex shrink-0 items-center justify-between border-b border-gray-100 bg-white p-5">
            <div>
                <h2 className="text-2xl font-bold text-astara-purple">
                    {title}
                </h2>
                <p className="text-[11px] font-bold tracking-widest text-gray-500 uppercase">
                    {subtitle}
                </p>
            </div>
            <div className="flex flex-wrap items-center gap-4">{children}</div>
        </header>
    );
}