import React, { useState } from 'react';

import { faviconUrlFor } from './helpers';

// A leaderboard reads as a ranked list partly because the marks step from dark
// to light down the table, so the fallback keeps that ordering signal.
const SWATCHES = ['#5b5b64', '#71717c', '#8a8a94', '#a3a3ac', '#bcbcc4'];

interface BrandMarkProps {
  domain: string;
  size?: number;
  /** Row index; picks the fallback swatch so the ramp follows rank order. */
  index?: number;
  /** Renders the merchant's own brand as the accent gradient. */
  own?: boolean;
}

const BrandMark = ({
  domain,
  size = 20,
  index = 0,
  own = false,
}: BrandMarkProps): JSX.Element => {
  const [failed, setFailed] = useState(false);
  const fallback = own
    ? 'linear-gradient(135deg,#C8175D,#7b3fe4)'
    : SWATCHES[index % SWATCHES.length];

  return (
    <span
      aria-hidden="true"
      className="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[5px]"
      style={{ width: size, height: size, background: fallback }}
    >
      {!failed && domain && (
        <img
          src={faviconUrlFor(domain, size * 2)}
          alt=""
          width={size}
          height={size}
          loading="lazy"
          className="h-full w-full object-cover"
          onError={() => setFailed(true)}
        />
      )}
    </span>
  );
};

export default BrandMark;