import React from 'react';

interface MaterialBadgeProps {
  base: string;
  modifier?: string;
  className?: string;
}

export const MaterialBadge: React.FC<MaterialBadgeProps> = ({ base, modifier, className = '' }) => {
  const getBaseColor = () => {
    switch (base) {
      case 'PLA':
        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
      case 'PETG':
        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
      case 'ABS':
        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
      case 'TPU':
        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
    }
  };

  return (
    <div className={`inline-flex items-center gap-2 ${className}`}>
      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getBaseColor()}`}>
        {base}
      </span>
      {modifier && (
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
          {modifier}
        </span>
      )}
    </div>
  );
};