import type { SVGProps } from "react";

/**
 * Cipher Gate mark — geometric portal with a central cipher node. Monoline +
 * currentColor so it can be tinted via text color. Mirrors the website logo.
 */
export function LogoMark({
  title = "Cipher Gate",
  ...props
}: SVGProps<SVGSVGElement> & { title?: string }) {
  return (
    <svg
      viewBox="0 0 48 48"
      fill="none"
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path d="M5 43h38" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" />
      <path
        d="M8 43V21a16 16 0 0 1 32 0v22"
        stroke="currentColor"
        strokeWidth="2.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M16 43V22a8 8 0 0 1 16 0v21"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        opacity="0.5"
      />
      <path d="M24 11v32" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.7" />
      <path
        d="M24 19.5 28.5 24 24 28.5 19.5 24Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinejoin="round"
      />
    </svg>
  );
}
