import type { ReactNode, CSSProperties } from 'react';

type BadgeTone = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'transparent' | 'black';

interface BadgeProps {
	children: ReactNode;
	tone?: BadgeTone;
}

const TONE_STYLES: Record<BadgeTone, CSSProperties> = {
	default: { backgroundColor: '#f0f0f0', color: '#1e1e1e' },
	primary: { backgroundColor: '#007cba', color: '#fff' },
	success: { backgroundColor: '#00a32a', color: '#fff' },
	warning: { backgroundColor: '#dba617', color: '#1e1e1e' },
	error: { backgroundColor: '#d63638', color: '#fff' },
	transparent: { backgroundColor: 'transparent', color: '#1e1e1e' },
	black: { backgroundColor: '#000', color: '#fff' },
};

const BASE_STYLE: CSSProperties = {
	display: 'inline-block',
	padding: '2px 8px',
	fontSize: 12,
	fontWeight: 500,
	borderRadius: 4,
	textAlign: 'center',
};

const Badge = ({ children, tone = 'default' }: BadgeProps) => {
	return (
		<span style={{ ...BASE_STYLE, ...TONE_STYLES[tone] }}>
			{children}
		</span>
	);
};

export default Badge;