// Image frame and small decorative accents.

const ImgFrame = ({ src, alt, frameClass = "", tag, style }) => {
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    if (!src) return;
    const probe = new Image();
    probe.onload = () => setLoaded(true);
    probe.onerror = () => setLoaded(false);
    probe.src = src;
  }, [src]);

  return (
    <figure className={`img-frame ${frameClass}`} style={{ margin: 0, ...style }} data-img-src={src}>
      <div className="img-placeholder" aria-hidden={loaded ? "true" : "false"}>
        <span>{alt}</span>
      </div>
      {tag && <figcaption className="img-corner-tag">{tag}</figcaption>}
      {loaded && <img src={src} alt={alt} loading="lazy" />}
    </figure>
  );
};

const Eucalyptus = ({ style }) => (
  <svg viewBox="0 0 140 240" style={style} aria-hidden="true" focusable="false">
    <path d="M70 230 C70 180 70 100 70 10" stroke="#7E8C76" strokeWidth="1.5" fill="none" />
    {Array.from({ length: 8 }).map((_, i) => {
      const y = 34 + i * 23;
      const flip = i % 2 === 0 ? 1 : -1;
      return (
        <g key={i} transform={`translate(70 ${y})`}>
          <ellipse cx={flip * 21} cy="0" rx="21" ry="9" fill={i < 3 ? "#A8B89D" : "#9EAB95"} transform={`rotate(${flip * 15})`} />
          <line x1="0" y1="0" x2={flip * 8} y2="0" stroke="#7E8C76" strokeWidth="1" />
        </g>
      );
    })}
  </svg>
);

Object.assign(window, { ImgFrame, Eucalyptus });