import "./CircleInfographic.scss";
import { useState } from "react";
import { Circle } from "./Circle";

/**
 * 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.
 */
export const CircleInfographic = ({ circle, 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)}
        />
        <Circle
          text={circle[1].text}
          card={circle[1].card}
          icons={circle[1].icons}
          color={"blue"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <Circle
          text={circle[3].text}
          card={circle[3].card}
          icons={circle[3].icons}
          color={"white"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <Circle
          text={circle[2].text}
          card={circle[2].card}
          icons={circle[2].icons}
          color={"orange"}
          handleCircleSelect={handleCircleSelect}
          close={() => setBlur(false)}
        />
        <h3 className="infographic--headline">{headline}</h3>
      </div>
    </div>
  );
};