export interface BannerBadgeProps {
  text: string;
  hiddenText?: string;
}

export const BannerBadge = ({ text, hiddenText }: BannerBadgeProps) => (
  <span className='inline-block rounded-full bg-strawberry-600 px-2 py-0.5 text-[12px] leading-[16px] font-medium text-dumbo-50 uppercase'>
    <span className='md:hidden'>{text}</span>
    <span className='hidden md:inline'>{hiddenText ? hiddenText : text}</span>
  </span>
);

export default BannerBadge;