/**
 * ServiceIcon Component
 *
 * Renders branded service icons from simple-icons library with fallback support.
 * Provides a consistent interface for displaying third-party service logos
 * throughout the admin interface.
 *
 * @module ServiceIcon
 */

import { FC } from 'react';
import { Package } from 'lucide-react';
import { getIconComponent } from '@/utils/serviceIconMapping';

/**
 * Props for the ServiceIcon component
 */
interface ServiceIconProps {
  /** Service identifier (e.g., 'mailchimp', 'slack', 'wordpress') */
  service: string;
  /** Icon size in pixels (default: 24) */
  size?: number;
  /** Custom color override (defaults to brand color) */
  color?: string;
  /** Additional CSS classes */
  className?: string;
  /** Custom fallback content if icon is not found */
  fallback?: React.ReactNode;
}

/**
 * ServiceIcon - Displays branded service icons with automatic fallback
 *
 * Features:
 * - Automatic icon resolution from service name
 * - Branded colors by default
 * - Customizable size and styling
 * - Graceful fallback for unmapped services
 *
 * @example
 * ```tsx
 * // Basic usage with default size (24px)
 * <ServiceIcon service="mailchimp" />
 * ```
 *
 * @example
 * ```tsx
 * // Custom size and styling
 * <ServiceIcon
 *   service="slack"
 *   size={40}
 *   className="mr-2"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Custom color override
 * <ServiceIcon
 *   service="hubspot"
 *   size={32}
 *   color="#FF6B6B"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With custom fallback
 * <ServiceIcon
 *   service="unknown-service"
 *   fallback={<CustomIcon />}
 * />
 * ```
 *
 * Fallback Hierarchy:
 * 1. Mapped service icon from simple-icons
 * 2. Custom fallback (if provided via fallback prop)
 * 3. Default fallback (Package icon with service initial)
 */
export const ServiceIcon: FC<ServiceIconProps> = ({
  service,
  size = 24,
  color,
  className = '',
  fallback,
}) => {
  const IconComponent = getIconComponent(service);

  // Primary: Render mapped service icon
  if (IconComponent) {
    return <IconComponent size={size} color={color} className={className} />;
  }

  // Secondary: Render custom fallback if provided
  if (fallback) {
    return <>{fallback}</>;
  }

  // Default: Render Package icon with service initial
  const serviceInitial = service.charAt(0).toUpperCase();

  return (
    <div
      className={`relative inline-flex items-center justify-center ${className}`}
      style={{ width: size, height: size }}
    >
      <Package size={size} className="text-slate-500" />
      <span className="absolute text-slate-900 font-bold" style={{ fontSize: size * 0.4 }}>
        {serviceInitial}
      </span>
    </div>
  );
};
