path: root/makima/frontend/src/components/Logo.tsx

interface LogoProps {
  size?: number;
  listening?: boolean;
  onClick?: () => void;
  className?: string;
  noHoverAnimation?: boolean;
}

export function Logo({
  size = 160,
  listening = false,
  onClick,
  className = "",
  noHoverAnimation = false,
}: LogoProps) {
  const shellSize = size * 1.4375; // 230/160 ratio
  const haloSize = size * 1.3125; // 210/160 ratio

  return (
    <div
      className={`relative grid place-items-center ${className}`}
      style={{
        width: shellSize,
        height: shellSize,
        filter: "drop-shadow(0 10px 26px rgba(12, 35, 67, 0.32))",
      }}
    >
      <div
        className={`logo-shell ${listening ? "listening" : ""} ${noHoverAnimation ? "no-hover-animation" : ""} ${onClick ? "cursor-pointer" : ""}`}
        style={{ width: shellSize, height: shellSize }}
        onClick={onClick}
        role={onClick ? "button" : undefined}
        tabIndex={onClick ? 0 : undefined}
        onKeyDown={
          onClick
            ? (e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  onClick();
                }
              }
            : undefined
        }
      >
        <span className="scan-sweep" />
        <span className="scan-sweep sweep-2" />
        <svg
          className="logo-svg"
          viewBox="0 0 120 120"
          xmlns="http://www.w3.org/2000/svg"
          style={{ width: size, height: size }}
          role="img"
          aria-label="Makima logo"
        >
          <circle
            className="ring ring-outer"
            cx="60"
            cy="60"
            r="52"
            strokeWidth="4"
          />
          <circle
            className="ring ring-middle"
            cx="60"
            cy="60"
            r="36"
            strokeWidth="3"
          />
          <circle
            className="ring ring-inner"
            cx="60"
            cy="60"
            r="22"
            strokeWidth="3"
          />
          <circle className="core" cx="60" cy="60" r="8" />
        </svg>
      </div>
      <div
        className="halo"
        aria-hidden="true"
        style={{ width: haloSize, height: haloSize }}
      />
    </div>
  );
}

// Small logo for header
export function LogoMark({ size = 32 }: { size?: number }) {
  return (
    <span
      className="inline-flex items-center justify-center"
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="12"
          cy="12"
          r="10"
          fill="none"
          stroke="#0f3c78"
          strokeWidth="2"
        />
        <circle
          cx="12"
          cy="12"
          r="7"
          fill="none"
          stroke="#0f3c78"
          strokeWidth="1.6"
        />
        <circle
          cx="12"
          cy="12"
          r="4"
          fill="none"
          stroke="#0f3c78"
          strokeWidth="1.6"
        />
        <circle cx="12" cy="12" r="1.6" fill="#0f3c78" />
      </svg>
    </span>
  );
}