import React from 'react';

// ---------------------------------------------------------------------------
// AtlasIcon — SVG recreation of the Atlas InfoSec logo icon.
// A rounded badge/card shape with a globe (crosshair grid) inside.
// Accepts the same props as lucide-react icons: style, width, height, color.
// ⚠️ CONVENTION: Uses raw SVG instead of lucide-react. Acceptable here because
// this is a custom brand icon (Atlas InfoSec logo) with no lucide-react equivalent.
// ---------------------------------------------------------------------------
export default function AtlasIcon({ style, width, height, color, ...props }) {
  const w = width || (style && style.width) || 24;
  const h = height || (style && style.height) || 24;
  const c = color || (style && style.color) || 'currentColor';

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={w}
      height={h}
      fill="none"
      stroke={c}
      strokeWidth="1.75"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ ...style, width: w, height: h, flexShrink: 0 }}
      {...props}
    >
      {/* Badge / card outline — rounded rectangle */}
      <rect x="3" y="2" width="18" height="20" rx="3" ry="3" />

      {/* Globe circle */}
      <circle cx="12" cy="11" r="5.5" />

      {/* Globe horizontal line */}
      <line x1="6.5" y1="11" x2="17.5" y2="11" />

      {/* Globe vertical line */}
      <line x1="12" y1="5.5" x2="12" y2="16.5" />

      {/* Globe left meridian arc */}
      <path d="M9.5 5.8C8.6 7.3 8 9 8 11s0.6 3.7 1.5 5.2" />

      {/* Globe right meridian arc */}
      <path d="M14.5 5.8C15.4 7.3 16 9 16 11s-0.6 3.7-1.5 5.2" />
    </svg>
  );
}