interface Props {
  svgImage?: string;
  symbol: string;
  name: string;
  loading?: boolean;
}

// Renders the real inline SVG artwork GET /user/horoscope/signs
// supplies per sign (svg_image), instead of the sign's separate `image`
// PNG URL — confirmed live that 9 of the 12 PNG URLs 302-redirect to an
// HTML admin login page (a real backend storage/ACL bug), while
// svg_image ships as markup directly inside the JSON response, so it
// has no separate network request to fail. This is server-supplied
// data from our own astrology backend (not user input), the same trust
// level as any other API field this app renders — falls back to the
// local zodiacSigns symbol only once loading has genuinely finished and
// a sign still has no svg_image, never as a placeholder while the
// signs API call is still in flight (a real, reported flash-of-the-
// wrong-icon: the plain unicode symbol would render for a moment on
// every load, then get replaced by the real artwork the instant
// useZodiacSigns() resolves).
export default function ZodiacImage({ svgImage, symbol, name, loading }: Props) {
  if (svgImage) {
    return (
      <span
        className="zodiac-svg"
        role="img"
        aria-label={name}
        dangerouslySetInnerHTML={{ __html: svgImage }}
      />
    );
  }

  if (loading) {
    return <span className="zodiac-svg-placeholder" aria-hidden="true" />;
  }

  return <>{symbol}</>;
}