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

/**
 * # Default Container
 * @className twui-container
 */
export default function Container({
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
    return (
        <div
            {...props}
            className={twMerge(
                "flex w-full max-w-[1200px] gap-4 justify-between",
                "flex-wrap flex-col xl:flex-row items-start xl:items-center",
                "twui-container",
                props.className
            )}
        >
            {props.children}
        </div>
    );
}