import React from 'react'

import { cn } from '../../services/cn'

const colorClass = {
  lavender: 'bg-lavender',
  'dark-green': 'bg-dark-green',
  black: 'bg-black',
} as const

type BadgeColorList = keyof typeof colorClass

export type BadgeProps = {
  /** Content of the Badge */
  children: React.ReactNode
  /** Color of the Badge */
  color: BadgeColorList
  /** Optional prop to add a test id to the Badge for QA testing */
  qaTestId?: string
}

const Badge = ({
  children,
  color = 'lavender',
  qaTestId = 'badge',
}: BadgeProps) => {
  return (
    <div
      className={cn(
        'flex h-[14px] w-max items-center justify-center rounded-xs px-1 text-[8px] font-semibold text-white uppercase',
        colorClass[color],
      )}
      qa-test-id={qaTestId}
      data-testid='badge'
    >
      {children}
    </div>
  )
}

export default Badge