import Tagline from "../Tagline/index.js";

const Heading = ({
    className,
    textAlignClassName,
    tagClassName,
    tag,
    titleLarge,
    title,
    textLarge,
    text,
    children,
}) => (
    <div
        className={`max-w-[50rem] mx-auto mb-12 ${
            textAlignClassName || "md:text-center"
        } lg:mb-20 ${className || ""}`}
    >
        {tag && (
            <Tagline className={`mb-4 md:justify-center ${tagClassName || ""}`}>
                {tag}
            </Tagline>
        )}
        {titleLarge && <h1 className="h1 text-n-1">{titleLarge}</h1>}
        {title && <h2 className="h2 text-n-1">{title}</h2>}
        {textLarge && <p className="h5 mt-6 text-n-2">{textLarge}</p>}
        {text && <p className="body-2 mt-4 text-n-2">{text}</p>}
        {children}
    </div>
);

export default Heading;