import React, { FC } from 'react'

import { formatClassList, joinStrings } from '../../utils'


type Tagtext = {
  className?: string,
  tagline: string,
  [other:string]: unknown
}

const CONTAINER: string = `
  absolute
  w-full
  flex
  justify-center
  -mt-6
  p-2
`

const BG: string = `
  bg-white
  py-1
`

const WRAPPER: string = `
  relative
`

const TAGLINE: string = `
  text-center
  font-serif
  text-bscs-gray-500
  text-lg
  italic
  font-normal
  px-3
`

const HR: string = `
  hidden
  md:block
`

const Tagline:FC<Tagtext> = ({
  className,
  tagline,
  ...other
}: Tagtext) => {
  const wrapperClassList = formatClassList(
    className
      ? joinStrings(' ', WRAPPER, className)
      : WRAPPER
  )

  const containerClassList = formatClassList(CONTAINER)
  const bgClassList = formatClassList(BG)
  const taglineClassList = formatClassList(TAGLINE)
  const hrClassList = formatClassList(HR)

  return (
    <div className={wrapperClassList} {...other}>
      <div className={containerClassList}>
        <div className={bgClassList}>
          <div className={taglineClassList}>
            {tagline}
          </div>
        </div>
      </div>
      <div className={hrClassList}>
        <hr />
      </div>
    </div>
  )
}

export default Tagline