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

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

const Badge = ({
  variant = 'custom',
  discountPercentage,
  icon,
  title,
  iconOnly,
  theme = '',
  top = 'top-1',
  right = 'right-1',
  width = 'w-full',
  direction = 'left',
}: BadgeProps) => {
  return (
    <div
      className={`${top} ${right} flex ${width}  ${
        iconOnly ? 'justify-center' : 'justify-start'
      } items-center overflow-hidden text-right ${
        iconOnly
          ? 'w-9 h-9 rounded-full'
          : 'relative inline text-center drop-shadow-xs mb-2 w-[125px] h-7 text-xs'
      } ${badges[variant].theme && badges[variant].theme} ${theme && theme}`}
      style={
        iconOnly
          ? {}
          : {
              clipPath:
                direction === 'left'
                  ? 'polygon(6px 0, 100% 0%, 100% 100%, 0% 100%)'
                  : 'polygon(0 0, 100% 0, 90% 100%, 0% 100%)',
            }
      }
    >
      <i
        className={`${
          variant === 'custom' && icon ? icon : badges[variant].icon
        } ${
          iconOnly
            ? 'text-2xl'
            : 'text-4xl font-normal relative top-1.5 right-0'
        }`}
      />
      {iconOnly ? null : (
        <span className="relative font-bold capitalize mr-2">
          &nbsp;&nbsp;
          {variant === 'discount' && discountPercentage
            ? `${discountPercentage}`
            : ''}
          {variant === 'custom' && title ? title : badges[variant].title}
        </span>
      )}
    </div>
  );
};

export default Badge;