import React from "react"
import { twMerge } from "tailwind-merge"

export interface ItitleComponent {
    title?: string
    className?: string
    options?: any
}

const TitleComponent = (props: ItitleComponent) => {
    const { title, className = "" } = props
    const options = props.options ?? {}
    const oClass = options.class || {}

    let titleBlock = (
        <h2 className={twMerge(className, oClass.title)}>{title}</h2>
    )
    if (options.divideTitle) {
        titleBlock = (
            <div className="relative flex w-full items-center py-5">
                <div
                    className={twMerge(
                        "border-secondary mb-4 flex-grow border-4 border-t",
                        oClass.divide
                    )}
                ></div>
                <span
                    className={twMerge(
                        "mx-10 uppercase",
                        className,
                        oClass.title
                    )}
                >
                    {title}
                </span>
                <div
                    className={twMerge(
                        "border-secondary mb-4 flex-grow border-4 border-t",
                        oClass.divide
                    )}
                ></div>
            </div>
        )
    }
    return titleBlock
}

export default TitleComponent