/**
* 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)
*
* ```
*
* @example
* ```tsx
* // Custom size and styling
*
* ```
*
* @example
* ```tsx
* // Custom color override
*
* ```
*
* @example
* ```tsx
* // With custom fallback
* }
* />
* ```
*
* 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 = ({
service,
size = 24,
color,
className = '',
fallback,
}) => {
const IconComponent = getIconComponent(service);
// Primary: Render mapped service icon
if (IconComponent) {
return ;
}
// Secondary: Render custom fallback if provided
if (fallback) {
return <>{fallback};
}
// Default: Render Package icon with service initial
const serviceInitial = service.charAt(0).toUpperCase();
return (
);
};