import React from 'react';
import badges from '../configs/badges';

export interface BadgeProps {
  variant: keyof typeof badges;
  iconOnly?: boolean;
  icon?: string;
  title?: string;
  discountPercentage?: string;
  theme?: string;
  top?: `top-${string}`;
  right?: `right-${string}`;
}

const Badge = ({
  variant = 'custom',
  discountPercentage,
  icon,
  title,
  iconOnly,
  theme = '',
  top = 'top-1',
  right = 'right-1',
}: BadgeProps) => {
  return (
    <div
      className={`absolute ${top} ${right} flex justify-center items-center border-2 font-bold text-xs ${
        iconOnly
          ? 'w-9 h-9 rounded-full'
          : 'w-max max-w-full py-1 px-2 rounded-md'
      } ${badges[variant].theme && badges[variant].theme} ${theme && theme}`}
    >
      <i
        className={`${
          variant === 'custom' && icon ? icon : badges[variant].icon
        }  ${iconOnly ? 'text-2xl' : 'mt-[1px] text-[larger]'}`}
      />
      {iconOnly ? null : (
        <>
          &nbsp;&nbsp;
          {variant === 'discount' && discountPercentage
            ? `${discountPercentage}`
            : ''}
          {variant === 'custom' && title ? title : badges[variant].title}
        </>
      )}
    </div>
  );
};

export default Badge;