import React from 'react'

import { BadgeProps, StyleProps } from './Badge.types'

import { handleStyle } from './Badge.helpers'

import './Badge.css'

const Badge = ({ children, type }: BadgeProps) => {
  const styles: StyleProps = handleStyle(type)

  return (
    <span
      className={`${styles.bg} border ${styles.border} border-opacity-50 capitalize font-medium px-4 rounded-full ${styles.text} text-xs w-fit`}
    >
      <i className={styles.icon + ' mr-1'} /> {children}
    </span>
  )
}

export default Badge
