export interface CleverStatusIconsProps {
  className?: string;
}

export default function CleverStatusIcons({
  className,
}: CleverStatusIconsProps) {
  return (
    <svg
      className={className}
      viewBox="0 0 800 800"
      width="100%"
      height="100%"
      style={{ aspectRatio: "1 / 1" }}
      role="img"
      aria-label="Cellular signal, WiFi, and battery status icons"
    >
      <g id="icons" transform="translate(400 396)" fill="currentColor">
        {/* Cellular — SF cellularbars style: 4 rounded bars, bottom aligned */}
        <g id="cellular-signal" transform="translate(-250 0)">
          <rect x="-67" y="21" width="26" height="42" rx="9" />
          <rect x="-31" y="-3" width="26" height="66" rx="9" />
          <rect x="5" y="-29" width="26" height="92" rx="9" />
          <rect x="41" y="-55" width="26" height="118" rx="9" />
        </g>

        {/* WiFi — macOS menu bar style: filled arcs around a dot */}
        {/* WiFi — iOS style: tapered wedge bands + teardrop dot */}
        <g
          id="wifi"
          transform="translate(0 -5)"
          fill="currentColor"
          stroke="currentColor"
          strokeWidth="12"
          strokeLinejoin="round"
        >
          <path d="M -32.7 22.6 A 44 44 0 0 1 32.7 22.6 L 16.3 37.3 A 22 22 0 0 0 -16.3 37.3 Z" />
          <path d="M -65.4 -6.8 A 88 88 0 0 1 65.4 -6.8 L 49 7.8 A 66 66 0 0 0 -49 7.8 Z" />
          <path d="M -11 42 H 11 L 0 61 Z" />
        </g>

        {/* Battery — iOS style: solid filled body + nub */}
        <g id="battery" transform="translate(250 0)">
          <rect x="-100" y="-55" width="190" height="110" rx="38" />
          <rect x="94" y="-17" width="16" height="34" rx="8" />
        </g>
      </g>
    </svg>
  );
}
Clever Status Icons
