app/app/components/ui/PageHeader.tsx

// app/components/ui/PageHeader.tsx

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

interface PageHeaderProps {
    title: string;
    icon: LucideIcon;
    description: string;
    variant?: 'default' | 'emergency';
    actions?: ReactNode;
}

export function PageHeader({
    title,
    icon: Icon,
    description,
    variant = 'default',
    actions
}: PageHeaderProps) {

    // Set colors based on the variant
    const isEmergency = variant === 'emergency';
    const titleColor = isEmergency ? 'text-emergency uppercase' : 'text-slate-teal';
    const iconColor = isEmergency ? 'text-emergency' : 'text-seafoam';
    const descColor = isEmergency ? 'text-ebony' : 'text-moss';

    return (
        <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-4 mb-4">
            <div>
                <h1 className={`text-3xl font-black tracking-tight flex items-center ${titleColor}`}>
                    <Icon className={`mr-3 shrink-0 ${iconColor}`} size={32} />
                    {title}
                </h1>
                <p className={`font-medium mt-2 ml-11 ${descColor} hidden sm:visible`}>
                    {description}
                </p>
            </div>

            {actions && (
                <div className="flex flex-col gap-2 items-start md:items-end ml-11 md:ml-0 mt-2 md:mt-0">
                    {actions}
                </div>
            )}
        </div>
    );
}