import type { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

/**
 * # Default Header
 * @className twui-header
 */
export default function Header({
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
    return (
        <header
            {...props}
            className={twMerge(
                "flex flex-col items-center justify-center",
                "px-4 sm:px-10 py-3 flex-wrap",
                "border-0 border-b border-slate-200 dark:border-white/10 border-solid",
                "twui-header",
                props.className,
            )}
        >
            {props.children}
        </header>
    );
}