import * as React from "react";

export type OrbitBadgeProps = Omit<React.SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & { title?: string };

export default function OrbitBadge({ title = "Orbit badge", ...props }: OrbitBadgeProps) {
  const instanceId = "svg-" + React.useId().split("").map(c => c.charCodeAt(0).toString(16)).join("-");
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="160" viewBox="0 0 192 160" focusable="false" role={title ? "img" : undefined} aria-hidden={title ? undefined : true} aria-labelledby={title ? instanceId + "-title" : undefined} {...props}>
      {title ? <title id={instanceId + "-title"}>{title}</title> : null}
      <defs>
        <linearGradient id={instanceId + "-0"} x1="0" y1="0" x2="1" y2="1">
          <stop stopColor="#4169e1" />
          <stop offset="1" stopColor="#8365e8" />
        </linearGradient>
        <clipPath id={instanceId + "-1"}>
          <rect x="16" y="16" width="160" height="128" rx="28" />
        </clipPath>
      </defs>
      <g clipPath={"" + "url(#" + (instanceId + "-1") + ")"}>
        <rect x="16" y="16" width="160" height="128" rx="28" fill={"" + "url(#" + (instanceId + "-0") + ")"} />
        <circle cx="152" cy="40" r="44" fill="#ffad33" />
        <path d="m48 84 24 24 48-56" fill="none" stroke="#ffffff" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round" />
      </g>
    </svg>
  );
}