import classNames from 'classnames'
import { ReactNode } from 'react'
import './style.scss'

interface BadgeProps {
	icon?: ReactNode
	iconOnly?: boolean
	text: string
	size?: 'small' | 'medium' | 'large'
	type?: 'filled' | 'inverted' | 'outlined'
	color?:
		| 'neutral'
		| 'neutral-dark-mode'
		| 'highlight'
		| 'success'
		| 'warning'
		| 'critical'
	className?: string
}

export default function Badge({
	icon,
	iconOnly,
	text,
	size = 'medium',
	type = 'filled',
	color = 'neutral',
	className,
	...rest
}: BadgeProps) {
	return (
		<div
			className={classNames(
				'hds-badge',
				`hds-badge--size-${size}`,
				`hds-badge--type-${type}`,
				`hds-badge--color-${color}`,
				className
			)}
			{...rest}
		>
			{icon && <div className="hds-badge__icon">{icon}</div>}
			{iconOnly ? (
				<span className="sr-only">{text}</span>
			) : (
				<div className="hds-badge__text">{text}</div>
			)}
		</div>
	)
}