import { Button } from '@/components/ui/button';
import React, { ReactNode } from 'react';

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

export default function PageHeader({ title, subtitle, children }:PageHeaderProps) {
    return (
        <section className="w-full bg-background text-foreground mb-5">
            <div className="mx-auto w-full">
                <div className="flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-end sm:justify-between">
                    <div className="flex flex-col gap-1.5">
                        <h1 className="font-heading text-xl font-bold tracking-tight sm:text-2xl">
                            {title}
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            {subtitle}
                        </p>
                    </div>

                    <div>
                        {children}
                    </div>
                </div>
            </div>
        </section>
    );
}