import React from 'react';
import type { SubmissionStatus } from '../../../src/types';

export interface StatusBadgeProps {
  status: SubmissionStatus;
  size?: 'sm' | 'md';
}

const statusConfig: Record<SubmissionStatus, { label: string; color: string; bg: string }> = {
  pending: { label: 'Pending', color: 'text-gray-700', bg: 'bg-gray-100' },
  creating_profile: { label: 'Creating Profile', color: 'text-blue-700', bg: 'bg-blue-100' },
  profile_submitted: { label: 'Profile Submitted', color: 'text-blue-700', bg: 'bg-blue-100' },
  creating_brand: { label: 'Creating Brand', color: 'text-indigo-700', bg: 'bg-indigo-100' },
  brand_pending: { label: 'Brand Pending', color: 'text-indigo-700', bg: 'bg-indigo-100' },
  brand_approved: { label: 'Brand Approved', color: 'text-green-700', bg: 'bg-green-100' },
  brand_failed: { label: 'Brand Failed', color: 'text-red-700', bg: 'bg-red-100' },
  creating_campaign: { label: 'Creating Campaign', color: 'text-purple-700', bg: 'bg-purple-100' },
  campaign_pending: { label: 'Campaign Pending', color: 'text-purple-700', bg: 'bg-purple-100' },
  campaign_approved: { label: 'Campaign Approved', color: 'text-green-700', bg: 'bg-green-100' },
  campaign_failed: { label: 'Campaign Failed', color: 'text-red-700', bg: 'bg-red-100' },
  remediation: { label: 'Remediation', color: 'text-yellow-700', bg: 'bg-yellow-100' },
  manual_review: { label: 'Manual Review', color: 'text-orange-700', bg: 'bg-orange-100' },
  completed: { label: 'Completed', color: 'text-green-700', bg: 'bg-green-100' }
};

export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, size = 'md' }) => {
  const config = statusConfig[status];
  const sizeClass = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-3 py-1';
  
  return (
    <span className={`inline-flex items-center font-medium rounded-full ${config.bg} ${config.color} ${sizeClass}`}>
      {config.label}
    </span>
  );
};
