import React from 'react';
import { twMerge } from 'tailwind-merge';

export interface BadgeProps {
  text: string;
  icon?: React.ReactNode;
  className?: string;
}

export const Badge: React.FC<BadgeProps> = ({ text, icon, className }) => {
  return (
    <span
      className={twMerge(
        'inline-flex items-center gap-1 rounded-xl px-2 py-0.5 text-[10px] font-medium uppercase',
        className
      )}
    >
      {icon && <span className='flex items-center'>{icon}</span>}
      <span>{text}</span>
    </span>
  );
};

export default Badge;