;(function () {
/* AssetMark — circle logo for assets (apple, netflix, google, tesla, gold, silver, fund). */

const AssetApple = ({ width, height, color }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 16" fill="none">
    <path d="M 13.562 5.457 C 13.486 5.502 11.667 6.442 11.667 8.528 C 11.753 10.906 13.962 11.74 14 11.74 C 13.962 11.785 13.666 12.876 12.791 14.021 C 12.096 15.006 11.324 16 10.153 16 C 9.038 16 8.638 15.343 7.353 15.343 C 5.972 15.343 5.581 16 4.524 16 C 3.353 16 2.524 14.953 1.791 13.977 C 0.839 12.699 0.03 10.693 0.001 8.767 C -0.018 7.747 0.192 6.744 0.725 5.892 C 1.477 4.703 2.82 3.895 4.286 3.869 C 5.41 3.833 6.41 4.587 7.096 4.587 C 7.753 4.587 8.981 3.869 10.371 3.869 C 10.971 3.869 12.571 4.038 13.562 5.457 Z M 7.001 3.665 C 6.801 2.733 7.353 1.801 7.867 1.207 C 8.524 0.488 9.562 0 10.457 0 C 10.514 0.932 10.152 1.846 9.505 2.511 C 8.924 3.23 7.924 3.771 7.001 3.665 Z" fill={color} fillRule="nonzero"/>
  </svg>
);

const CoinsStacked = ({ width, height, color }) => (
  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 8c3.866 0 7-1.343 7-3s-3.134-3-7-3-7 1.343-7 3 3.134 3 7 3Z M5 5v6c0 1.657 3.134 3 7 3s7-1.343 7-3V5 M5 11v6c0 1.657 3.134 3 7 3s7-1.343 7-3v-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const AssetMark = ({ kind, size = 32 }) => {
  if (kind === 'apple') {
    return (
      <BrandCircle bg="#fff" size={size}>
        <AssetApple width={size * 0.55} height={size * 0.6} color="#000" />
      </BrandCircle>
    );
  }
  if (kind === 'netflix') {
    return <img src="superapp/icons/asset-netflix.svg" width={size} height={size} alt="" />;
  }
  if (kind === 'google') {
    return <img src="superapp/icons/asset-google.svg" width={size} height={size} alt="" />;
  }
  if (kind === 'tesla') {
    return <img src="superapp/icons/asset-tesla.svg" width={size} height={size} alt="" />;
  }
  if (kind === 'gold') {
    return (
      <div
        style={{
          width: `${size}px`,
          height: `${size}px`,
          borderRadius: `${size / 2}px`,
          overflow: 'hidden',
          flexShrink: 0,
        }}
      >
        <div
          style={{
            // 140° gradient: start ~ top-right, end ~ bottom-left
            background: 'linear-gradient(214deg, #F5DC8A 0%, #D8AB44 55%, #9A6B1C 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <CoinsStacked width={size * 0.55} height={size * 0.55} color="#fff" />
        </div>
      </div>
    );
  }
  if (kind === 'silver') {
    return (
      <div
        style={{
          width: `${size}px`,
          height: `${size}px`,
          borderRadius: `${size / 2}px`,
          overflow: 'hidden',
          flexShrink: 0,
        }}
      >
        <div
          style={{
            background: 'linear-gradient(214deg, #F1F2F4 0%, #B8BCC2 55%, #74787E 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <CoinsStacked width={size * 0.55} height={size * 0.55} color="#fff" />
        </div>
      </div>
    );
  }
  if (kind === 'fund') {
    return <BrandCircle bg="#0E1420" size={size} />;
  }
  return null;
};

Object.assign(window, { AssetMark });
})();