"use client";

export function SignalCellular3Icon({
  level,
  className = "h-3.5 w-3.5",
}: {
  level?: number | null;
  className?: string;
}) {
  const normalizedLevel = typeof level === "number" && Number.isFinite(level) ? Math.max(0, Math.floor(level)) : 0;
  const activeBars = normalizedLevel >= 3 ? 3 : normalizedLevel >= 2 ? 2 : normalizedLevel >= 1 ? 1 : 0;
  const barStyle = (index: number) => {
    if (activeBars === 0) {
      return { fill: "#64748b", stroke: "none" };
    }

    if (index < activeBars) {
      return { fill: "#22c55e", stroke: "none" };
    }

    return { fill: "none", stroke: "#f8fafc", strokeWidth: 1.35 };
  };

  return (
    <svg viewBox="0 0 24 24" className={`${className} shrink-0`} aria-hidden="true">
      <rect x="4" y="14" width="3.25" height="6" rx="0.8" {...barStyle(0)} />
      <rect x="10.25" y="10" width="3.25" height="10" rx="0.8" {...barStyle(1)} />
      <rect x="16.5" y="6" width="3.25" height="14" rx="0.8" {...barStyle(2)} />
    </svg>
  );
}