import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

type PageHeaderActionsProps = {
    title: string;
    /** Plain text on most pages; rich content (e.g. links) only where needed. */
    description?: ReactNode;
    actions?: ReactNode;
    className?: string;
};

export function PageHeaderActions({
    title,
    description,
    actions,
    className,
}: PageHeaderActionsProps) {
    return (
        <div className={cn("mx-auto flex w-full items-start justify-between gap-4 mt-4", className)}>
            <div>
                <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
                {description ? (
                    <p className="text-sm text-muted-foreground">{description}</p>
                ) : null}
            </div>
            {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
        </div>
    );
}