src/shared/components/ProviderIcon.js

"use client";

import { useState } from "react";
import PropTypes from "prop-types";
import { getProviderIconSrc, markProviderIconMissing } from "@/shared/utils/providerIcon";

function resolveSrc(src, providerId) {
  if (providerId) return getProviderIconSrc(providerId);
  if (!src) return null;
  const m = String(src).match(/^\/providers\/([^/]+)\.png$/i);
  if (m) return getProviderIconSrc(m[1]);
  return src;
}

export default function ProviderIcon({

  src,

  providerId,

  alt,

  size = 32,

  className = "",

  fallbackText = "?",

  fallbackColor,

}) {
  const effectiveSrc = resolveSrc(src, providerId);
  const [errored, setErrored] = useState(false);

  if (!effectiveSrc || errored) {
    return (
      <span

        className={`inline-flex items-center justify-center font-bold rounded-lg ${className}`.trim()}

        style={{

          width: size,

          height: size,

          color: fallbackColor,

          fontSize: Math.max(10, Math.floor(size * 0.38)),

        }}

      >

        {fallbackText}

      </span>
    );
  }

  return (
    <img

      src={effectiveSrc}

      alt={alt}

      width={size}

      height={size}

      className={className}

      loading="lazy"

      decoding="async"

      onError={() => {

        const m = effectiveSrc.match(/^\/providers\/([^/]+)\.png$/i);

        if (m) markProviderIconMissing(m[1]);

        if (providerId) markProviderIconMissing(providerId);

        setErrored(true);

      }}

    />
  );
}

ProviderIcon.propTypes = {
  src: PropTypes.string,
  providerId: PropTypes.string,
  alt: PropTypes.string,
  size: PropTypes.number,
  className: PropTypes.string,
  fallbackText: PropTypes.string,
  fallbackColor: PropTypes.string,
};