simstudioai--sim/apps/sim/app/(landing)/integrations/components/integration-icon.tsx

import type { ComponentType, ElementType, HTMLAttributes, SVGProps } from 'react'
import { cn } from '@sim/emcn'
import { getTileIconColorClass } from '@/blocks/icon-color'

interface IntegrationIconProps extends HTMLAttributes<HTMLElement> {
  bgColor: string
  /** Integration name - used for the fallback initial letter. */
  name: string
  /** Optional icon component. When absent, renders the first letter of `name`. */
  Icon?: ComponentType<SVGProps<SVGSVGElement>> | null
  /** Tailwind size + rounding classes for the container. Default: `size-10 rounded-xl` */
  className?: string
  /** Tailwind size classes for the icon SVG. Default: `size-5` */
  iconClassName?: string
  /** Tailwind text-size class for the fallback letter. Default: `text-[15px]` */
  fallbackClassName?: string
  /** Rendered HTML element. Default: `div` */
  as?: ElementType
}

/**
 * Colored icon box used across integration listing and detail pages.
 * Renders an integration icon over a brand-colored background, falling back
 * to the integration's initial letter when no icon is available.
 */
export function IntegrationIcon({
  bgColor,
  name,
  Icon,
  className,
  iconClassName = 'size-5',
  fallbackClassName = 'text-[15px]',
  as: Tag = 'div',
  ...rest
}: IntegrationIconProps) {
  return (
    <Tag
      className={cn('flex shrink-0 items-center justify-center', className)}
      style={{ background: bgColor }}
      {...rest}
    >
      {Icon ? (
        <Icon className={cn(iconClassName, getTileIconColorClass(bgColor))} />
      ) : (
        <span className={cn('leading-none', getTileIconColorClass(bgColor), fallbackClassName)}>
          {name.charAt(0)}
        </span>
      )}
    </Tag>
  )
}