const KERNEL_PATH =
  'M27.10145 22.82898l0-7.26956 8.09855-4.65507-1.53044-2.67826-8.09854 4.46377-6.37682-3.76232 0-8.92754-3.1884 0 0 8.9913-6.37681 3.69856-7.84348-4.46377-1.78551 2.55072 7.97101 4.52754 0 7.46087-7.97101 4.5913 1.78551 2.93334 7.84348-4.52754 6.37681 3.57101 0 9.11884 3.1884 0 0-9.11884 6.37682-3.63478 8.09854 4.59131 1.65798-2.93334-8.22609-4.52754z'

export interface KernelMarkProps {
  size?: number
  radius?: number
}

/** The Kernel glyph on an orange badge (logo mark from the auth design). */
export function KernelMark({ size = 44, radius = 12 }: KernelMarkProps) {
  return (
    <span
      className="inline-flex shrink-0 items-center justify-center bg-primary"
      style={{ width: size, height: size, borderRadius: radius }}
    >
      <svg viewBox="0 0 35.33 38.45" style={{ width: size * 0.8 }} aria-hidden>
        <path d={KERNEL_PATH} fill="#1C2127" />
      </svg>
    </span>
  )
}