import PropTypes from "prop-types";
import { VENN_DIAGRAM_SVG } from "./venn-diagram-svg";
import "./ValueInfographic.scss";

/**
 * Clickable Venn-diagram infographic of the 6 value/excellence drivers,
 * ported from the old value-infografic Lit component. The SVG itself is a
 * large static asset (see venn-diagram-svg.js) rendered via
 * dangerouslySetInnerHTML - safe here since the markup is our own trusted,
 * static file, not user input. Clicks are handled by delegation (each
 * segment carries a data-driver-id attribute) instead of converting ~14
 * inline Lit event bindings into individual JSX handlers.
 *
 * @param {Object} props
 * @param {function(string): void} props.onSelect - Called with the clicked driver's id.
 */
export const ValueInfographic = ({ onSelect }) => {
  const handleClick = (e) => {
    const target = e.target.closest("[data-driver-id]");
    if (target) onSelect(target.dataset.driverId);
  };

  return (
    <div
      className="value-infographic"
      onClick={handleClick}
      dangerouslySetInnerHTML={{ __html: VENN_DIAGRAM_SVG }}
    />
  );
};

ValueInfographic.propTypes = {
  onSelect: PropTypes.func.isRequired,
};