import type {ReactNode} from "react";
import clsx from "clsx";

/**
 * A reusable sticky header component that stays fixed at the top
 * of its parent container. You can pass arbitrary children such as
 * headings, toolbars, or filters.
 *
 * Example:
 * ```tsx
 * <StickyHeader className="mt-4">
 *   <h1>Recipes</h1>
 *   <RecipeListToolbar ... />
 * </StickyHeader>
 * ```
 */
type StickyHeaderProps = {
    /** Content to render inside the header */
    children: ReactNode;

    /** Optional additional Tailwind classes */
    className?: string;
};

export default function StickyHeader({children, className = ""}: StickyHeaderProps) {
    return (
        <div
            className={clsx(
                "sticky top-0 left-0 right-0 bg-gray-100 pb-6 border-b-2 border-gray-300 z-10",
                className
            )}
        >
            {children}
        </div>
    );
}
