import "./CircleInfographic.scss";
import { useState } from "react";
import { Circle } from "./Circle";
import "@ui-marcom/icon";

/**
 * Interactive four-circle service infographic ("circleInfographic" element
 * type): tapping a circle opens its detail {@link Card} and blurs the rest.
 * Expects exactly four entries; render order is fixed to match the layout.
 *
 * @param {Object} props
 * @param {Array<{text: string, icons: Array<{small: string, big: string}>, card: {headline: string|null, text: string|null, underline: string|null}}>} props.circle - The four circle definitions.
 * @param {string} props.headline - Label shown in the center of the ring.
 */

const ARROW_BLACK = "/assets/icons/es_rad_impact-arrow-1.svg";
const ARROW_BLUE = "/assets/icons/es_rad_impact-arrow-2.svg";
const ARROW_ORANGE = "/assets/icons/es_rad_impact-arrow-3.svg";
export const CircleInfographic = ({ circle, qrcode, headline }) => {
  const [blur, setBlur] = useState(false);
  const handleCircleSelect = () => {
    setBlur(true);
  };
  return (
    <div className={`infographic-container ${blur ? "blur" : ""}`}>
      <div className={`circle-container`}>
        <Circle
          text={circle[0].text}
          card={circle[0].card}
          icons={circle[0].icons}
          color={"black"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <img src={ARROW_BLACK} className="arrow--black" />
        <Circle
          text={circle[1].text}
          card={circle[1].card}
          icons={circle[1].icons}
          color={"blue"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <img src={ARROW_BLUE} className="arrow--blue" />
        <Circle
          text={circle[3].text}
          card={circle[3].card}
          icons={circle[3].icons}
          color={"white"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <img src={ARROW_ORANGE} className="arrow--orange" />
        <Circle
          text={circle[2].text}
          card={circle[2].card}
          icons={circle[2].icons}
          color={"orange"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <div className="infographic--headlinecontainer">
          <h3 className="infographic--headline">{headline}</h3>
        </div>
      </div>
      <img className="infographic__qrcode" src={qrcode} alt="" />
    </div>
  );
};