import React from "react";

interface SectionTitleProps {
    tagline: string;
    title: string;
    centered?: boolean;
    light?: boolean;
    showShape?: boolean;
    className?: string;
}

const SectionTitle: React.FC<SectionTitleProps> = ({
    tagline,
    title,
    centered = false,
    light = false,
    showShape = true,
    className = "",
}) => {
    return (
        <div className={`sec-title-wrapper p-relative ${centered ? "text-center" : ""} ${className}`}>
            <div className={`sec-title ${light ? "sec-title--light" : ""}`}>
                <div className="sec-title__shape"></div>
                <h6 className="sec-title__tagline">{tagline}</h6>
                <h3 className={`sec-title__title ${light ? "text-white" : ""}`}
                    dangerouslySetInnerHTML={{ __html: title }}
                />
            </div>
            {showShape && (
                <img
                    src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png"
                    alt=""
                    className="sec-title__text-shape"
                />
            )}
        </div>
    );
};

export default SectionTitle;