import React from 'react';

export type ContentSource = 'igny8' | 'wordpress' | 'shopify' | 'custom';

interface SourceBadgeProps {
  source: ContentSource;
  className?: string;
}

const sourceConfig = {
  igny8: { label: 'IGNY8', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' },
  wordpress: { label: 'WordPress', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
  shopify: { label: 'Shopify', color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' },
  custom: { label: 'Custom', color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' },
};

export const SourceBadge: React.FC<SourceBadgeProps> = ({ source, className = '' }) => {
  const config = sourceConfig[source] || sourceConfig.custom;
  
  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.color} ${className}`}>
      {config.label}
    </span>
  );
};

