import type { JSX } from "react";
import { cn } from "../../lib/utils";

/**
 * Small inline-SVG crab mark used in the inspector header. Stroke-based so
 * the colour follows `currentColor` — pair with a Tailwind text colour class
 * (e.g. `text-amber-500`) to recolour without editing the SVG. Sized to
 * match the title text by default; pass `className` to override.
 *
 * Plays on the project owner's `TonyClaw` handle and keeps the title bar
 * visually distinct in the same way Claude Code's CLI uses a small
 * block-cursor mark next to its name.
 */
export function CrabLogo({ className }: { className?: string }): JSX.Element {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      className={cn("inline-block size-5", className)}
    >
      {/* Body */}
      <path d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z" />
      {/* Left claw */}
      <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
      {/* Right claw */}
      <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
      {/* Eye stalks */}
      <line x1="10" y1="7" x2="9.5" y2="5" />
      <line x1="14" y1="7" x2="14.5" y2="5" />
      {/* Eyes */}
      <circle cx="9.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
      <circle cx="14.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
      {/* Legs */}
      <line x1="6.5" y1="16" x2="4.5" y2="19.5" />
      <line x1="9" y1="17.5" x2="8" y2="20.5" />
      <line x1="15" y1="17.5" x2="16" y2="20.5" />
      <line x1="17.5" y1="16" x2="19.5" y2="19.5" />
    </svg>
  );
}
