import React from "react"
import cx from "classix"

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

const TitleComponent = (props: ItitleComponent) => {
  const { title, className = "", options = {} } = props  

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

}

export default TitleComponent