import React, { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';

interface PageHeaderProps {
    title: string;
    subtitle?: string;
    icon?: LucideIcon;
    actions?: ReactNode;
    className?: string;
}

export const PageHeader: React.FC<PageHeaderProps> = ({
    title,
    subtitle,
    icon: Icon,
    actions,
    className = '',
}) => {
    return (
        <div className={`flex flex-col space-y-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 ${className}`}>
            <div>
                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                    {Icon && <Icon className="h-6 w-6" />}
                    {title}
                </h1>
                {subtitle && (
                    <p className="text-gray-600 dark:text-gray-400 mt-1">
                        {subtitle}
                    </p>
                )}
            </div>
            {actions && (
                <div className="flex-shrink-0">
                    {actions}
                </div>
            )}
        </div>
    );
};

