type Props = {
  /** Rendered size of the mark glyph in pixels. */
  size?: number;
  className?: string;
};

/** Agent-designed Fjora wordmark: peak-and-water glyph plus letterforms. */
export function Wordmark({ size = 28, className }: Props) {
  return (
    <span className={className ? `wordmark ${className}` : "wordmark"}>
      <svg
        className="wordmark__glyph"
        width={size}
        height={size}
        viewBox="0 0 32 32"
        aria-hidden="true"
        focusable="false"
      >
        <path
          d="M4 18.5 12.5 6l6 8.8L22 10l6 8.5"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M4 23c2.6 0 2.6-1.8 5.2-1.8S11.8 23 14.4 23s2.6-1.8 5.2-1.8S22.2 23 24.8 23s2.6-1.8 5.2-1.8"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinecap="round"
          opacity="0.75"
        />
        <path
          d="M4 27.4c2.6 0 2.6-1.8 5.2-1.8s2.6 1.8 5.2 1.8 2.6-1.8 5.2-1.8 2.6 1.8 5.2 1.8 2.6-1.8 5.2-1.8"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinecap="round"
          opacity="0.4"
        />
      </svg>
      <span className="wordmark__text">Fjora</span>
    </span>
  );
}