import "./CircleChain.scss";

// brand gradient endpoints (orange -> teal), matching the accent colors
// already used across the app (--uimc-color-orange, the teal story-icon)
const FROM = [0xec, 0x66, 0x02];
const TO = [0x00, 0x99, 0x99];

const mix = (ratio) => {
  const [r, g, b] = FROM.map((from, i) => Math.round(from + (TO[i] - from) * ratio));
  return `rgb(${r} ${g} ${b})`;
};

/**
 * N labeled circles overlapping in a horizontal row ("circleChain" element
 * type), brand-gradient colored left to right.
 *
 * @param {Object} props
 * @param {Array<{text: string}>} props.items - Circles, left to right.
 */
export const CircleChain = ({ items }) => {
  return (
    <div className="circle-chain">
      {items.map((item, index) => (
        <div
          key={index}
          className="circle-chain__circle"
          style={{ background: mix(items.length > 1 ? index / (items.length - 1) : 0) }}>
          <span className="circle-chain__text">{item.text}</span>
        </div>
      ))}
    </div>
  );
};