import React, { FC, ReactNode } from 'react'

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


type TagTypes = {
  children: ReactNode,
  variant?: string,
  className?: string,
  [other:string]: unknown
}

const TAG: string = `
  text-bscs-gray-500
  tracking-wider
  font-thin
  text-sm
`

const TAGSPAN: string = `
  border-l-4
`

const BLUE: string = `
  border-bscs-blue-500
`

const GREEN: string = `
  border-bscs-green-400
`

const INDIGO: string = `
  border-bscs-indigo-500
`

const ORANGE: string = `
  border-bscs-orange-400
`

const RED: string = `
  border-bscs-red-400
`

const VIOLET: string = `
  border-bscs-violet-400
`

const YELLOW: string = `
  border-bscs-yellow-500
`

const VARIANTS: Record<string, string> = {
  'yellow': YELLOW,
  'violet': VIOLET,
  'orange': ORANGE,
  'red': RED,
  'green': GREEN,
  'blue': BLUE,
  'indigo': INDIGO
}

const Tag:FC<TagTypes> = ({
  children,
  variant = 'indigo',
  className,
  ...other
}: TagTypes) => {
  variant = variant.toLowerCase()

  const tagspanClassList: string = formatClassList(
    className
      ? appendVariantClasses(
          joinStrings(' ', TAGSPAN, className),
          VARIANTS,
          variant
        )
      : appendVariantClasses(TAGSPAN, VARIANTS, variant)
  )

  const tagClasslist: string = formatClassList(TAG)

  return (
    <p className={tagClasslist} {...other}>
      <span
        className={tagspanClassList}
      >
        &nbsp;{children}
      </span><br />
    </p>
  )
}

export default Tag