import React from 'react';

interface BadgeItem {
  name: string;
  color?: string | null;
}

interface BadgeProps {
  badges?: BadgeItem[] | null;
  placement?: 'overlay' | 'inline';
}

const Badge: React.FC<BadgeProps> = ({ badges, placement = 'overlay' }) => {
  if (!badges || badges.length === 0) return null;

  return (
    <div className={placement === 'inline'
      ? 'flex flex-wrap items-center gap-1.5'
      : 'absolute right-2 top-2 z-10 flex flex-col gap-1 sm:right-3 sm:top-3 sm:gap-1.5'
    }>
      {badges.map((badge, idx) => {
        const isDefaultColor = !badge.color;
        const bgColor = badge.color ?? undefined;

        return (
          <div
            key={`${badge.name}-${idx}`}
            className={`flex justify-center px-2 sm:px-3 py-1 sm:py-1.5 rounded-md font-bold text-xs sm:text-sm uppercase tracking-wider shadow-lg ${
              isDefaultColor ? 'bg-white text-luxury-dark' : ''
            }`}
            style={
              isDefaultColor
                ? undefined
                : { backgroundColor: bgColor, color: 'white' }
            }
          >
            {badge.name}
          </div>
        );
      })}
    </div>
  );
};

export default Badge;