/**
 * Inline SVG icon set for the online class room.
 *
 * Replaces the Bootstrap icon font inside the room: font icons can't animate
 * per-path, inherit stroke width, or render crisply at the sizes the control
 * bar needs. Every icon is a 24x24 viewBox and inherits `currentColor`.
 */
import type { SVGProps } from 'react';

type IconProps = SVGProps<SVGSVGElement> & { size?: number };

function Svg({ size = 20, children, ...rest }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.75}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
      {...rest}
    >
      {children}
    </svg>
  );
}

export const MicOn = (p: IconProps) => (
  <Svg {...p}>
    <rect x="9" y="2" width="6" height="11" rx="3" />
    <path d="M5 10a7 7 0 0 0 14 0" />
    <path d="M12 17v5" />
  </Svg>
);

export const MicOff = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9 9V5a3 3 0 0 1 5.9-.7" />
    <path d="M15 9.3V11a3 3 0 0 1-4.6 2.5" />
    <path d="M5 10a7 7 0 0 0 10.6 6" />
    <path d="M19 10a7 7 0 0 1-.6 2.8" />
    <path d="M12 17v5" />
    <path d="M3 3l18 18" />
  </Svg>
);

export const CamOn = (p: IconProps) => (
  <Svg {...p}>
    <rect x="2" y="6" width="13" height="12" rx="2.5" />
    <path d="M15 11l6-3.5v9L15 13z" />
  </Svg>
);

export const CamOff = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9 6h3.5a2.5 2.5 0 0 1 2.5 2.5V11" />
    <path d="M15 11l6-3.5v9l-3-1.7" />
    <path d="M2 8.5A2.5 2.5 0 0 1 4.5 6" />
    <path d="M2 9v6.5A2.5 2.5 0 0 0 4.5 18h8" />
    <path d="M3 3l18 18" />
  </Svg>
);

export const Screen = (p: IconProps) => (
  <Svg {...p}>
    <rect x="2" y="4" width="20" height="13" rx="2" />
    <path d="M8 21h8M12 17v4" />
  </Svg>
);

export const ScreenOff = (p: IconProps) => (
  <Svg {...p}>
    <path d="M22 15V6a2 2 0 0 0-2-2H9" />
    <path d="M2 6v9a2 2 0 0 0 2 2h13" />
    <path d="M8 21h8M12 17v4" />
    <path d="M3 3l18 18" />
  </Svg>
);

export const Board = (p: IconProps) => (
  <Svg {...p}>
    <rect x="2" y="3" width="20" height="13" rx="2" />
    <path d="M12 16v3" />
    <path d="M8 21l4-2 4 2" />
    <path d="M6 9.5l3 2.5 4-5 3 3.5" />
  </Svg>
);

export const Record = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="9" />
    <circle cx="12" cy="12" r="4" fill="currentColor" stroke="none" />
  </Svg>
);

export const StopSquare = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="9" />
    <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" stroke="none" />
  </Svg>
);

export const Play = (p: IconProps) => (
  <Svg {...p}>
    <path d="M7 4.5v15l13-7.5z" fill="currentColor" stroke="none" />
  </Svg>
);

export const Hand = (p: IconProps) => (
  <Svg {...p}>
    <path d="M8 12V5.5a1.5 1.5 0 0 1 3 0V11" />
    <path d="M11 11V4.5a1.5 1.5 0 0 1 3 0V11" />
    <path d="M14 11V6.5a1.5 1.5 0 0 1 3 0V13" />
    <path d="M8 12v-1a1.5 1.5 0 0 0-3 0v3a7 7 0 0 0 7 7h1a7 7 0 0 0 7-7v-3" />
  </Svg>
);

export const Send = (p: IconProps) => (
  <Svg {...p}>
    <path d="M21 3L3 10.5l7 3 3 7z" />
    <path d="M21 3l-11 11.5" />
  </Svg>
);

export const Clip = (p: IconProps) => (
  <Svg {...p}>
    <path d="M20 11.5l-8 8a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8" />
  </Svg>
);

export const Poll = (p: IconProps) => (
  <Svg {...p}>
    <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />
  </Svg>
);

export const Chat = (p: IconProps) => (
  <Svg {...p}>
    <path d="M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
    <path d="M7 9h10M7 13h7" />
  </Svg>
);

export const ChatOff = (p: IconProps) => (
  <Svg {...p}>
    <path d="M8 4h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
    <path d="M13 18H9l-5 4v-4a2 2 0 0 1-2-2V7" />
    <path d="M3 3l18 18" />
  </Svg>
);

export const Folder = (p: IconProps) => (
  <Svg {...p}>
    <path d="M3 6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
  </Svg>
);

export const Volume = (p: IconProps) => (
  <Svg {...p}>
    <path d="M4 10v4h4l5 4V6l-5 4z" />
    <path d="M16 9a4 4 0 0 1 0 6M19 6a8 8 0 0 1 0 12" />
  </Svg>
);

export const Sun = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="4" />
    <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
  </Svg>
);

export const Moon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M20 15.5A8.5 8.5 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5z" />
  </Svg>
);

export const Pencil = (p: IconProps) => <Svg {...p}><path d="M4 20l4.5-1 11-11a2.1 2.1 0 0 0-3-3l-11 11zM14.5 7.5l3 3" /></Svg>;
export const Eraser = (p: IconProps) => <Svg {...p}><path d="M4 15l8-10a2 2 0 0 1 3-.2l4.2 4.2a2 2 0 0 1-.2 3L12 20H7zM10 20h11" /></Svg>;
export const Line = (p: IconProps) => <Svg {...p}><path d="M5 19L19 5" /></Svg>;
export const Arrow = (p: IconProps) => <Svg {...p}><path d="M5 19L19 5M10 5h9v9" /></Svg>;
export const Square = (p: IconProps) => <Svg {...p}><rect x="4" y="4" width="16" height="16" rx="1" /></Svg>;
export const Circle = (p: IconProps) => <Svg {...p}><circle cx="12" cy="12" r="8" /></Svg>;
export const Diamond = (p: IconProps) => <Svg {...p}><path d="M12 3l9 9-9 9-9-9z" /></Svg>;
export const Text = (p: IconProps) => <Svg {...p}><path d="M5 5h14M12 5v14M8 19h8" /></Svg>;
export const Undo = (p: IconProps) => <Svg {...p}><path d="M9 8H4V3M4 8a9 9 0 1 1 2 10" /></Svg>;
export const Redo = (p: IconProps) => <Svg {...p}><path d="M15 8h5V3M20 8a9 9 0 1 0-2 10" /></Svg>;
export const Trash = (p: IconProps) => <Svg {...p}><path d="M4 7h16M9 7V4h6v3M7 7l1 14h8l1-14M10 11v6M14 11v6" /></Svg>;
export const Image = (p: IconProps) => <Svg {...p}><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="10" r="2" /><path d="M3 17l5-4 4 3 3-3 6 5" /></Svg>;
export const Minus = (p: IconProps) => <Svg {...p}><path d="M5 12h14" /></Svg>;
export const Check = (p: IconProps) => <Svg {...p}><path d="M5 12.5l4.5 4.5L19 7.5" /></Svg>;

export const People = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="9" cy="8" r="3.5" />
    <path d="M2.5 20a6.5 6.5 0 0 1 13 0" />
    <path d="M16 5.2a3.5 3.5 0 0 1 0 5.6" />
    <path d="M18 14.5a6.5 6.5 0 0 1 3.5 5.5" />
  </Svg>
);

export const Leave = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
    <path d="M16 17l5-5-5-5" />
    <path d="M21 12H9" />
  </Svg>
);

export const KickUser = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="9" cy="8" r="3.5" />
    <path d="M2.5 20a6.5 6.5 0 0 1 12-3.4" />
    <path d="M17 16l5 5M22 16l-5 5" />
  </Svg>
);

export const Megaphone = (p: IconProps) => (
  <Svg {...p}>
    <path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z" />
    <path d="M15 9a3.5 3.5 0 0 1 0 6" />
    <path d="M18 6.5a7 7 0 0 1 0 11" />
  </Svg>
);

export const Close = (p: IconProps) => (
  <Svg {...p}>
    <path d="M6 6l12 12M18 6L6 18" />
  </Svg>
);

export const Plus = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 5v14M5 12h14" />
  </Svg>
);

export const Download = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 3v12" />
    <path d="M7 11l5 5 5-5" />
    <path d="M4 20h16" />
  </Svg>
);

export const Pin = (p: IconProps) => (
  <Svg {...p}>
    <path d="M12 17v5" />
    <path d="M9 3h6l-1 6 3 3v2H7v-2l3-3z" />
  </Svg>
);

export const Info = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M12 11v5M12 8h.01" />
  </Svg>
);

export const Lock = (p: IconProps) => (
  <Svg {...p}>
    <rect x="4" y="10" width="16" height="11" rx="2" />
    <path d="M8 10V7a4 4 0 0 1 8 0v3" />
  </Svg>
);

export const UserPlus = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="9" cy="8" r="3.5" />
    <path d="M2.5 20a6.5 6.5 0 0 1 12-3.4" />
    <path d="M19 14v6M22 17h-6" />
  </Svg>
);

export const Hourglass = (p: IconProps) => (
  <Svg {...p}>
    <path d="M7 3h10M7 21h10" />
    <path d="M7 3v4l5 5 5-5V3" />
    <path d="M7 21v-4l5-5 5 5v4" />
  </Svg>
);

/**
 * Signal-strength bars driven by round-trip time.
 * level 0 = offline, 1 = poor, 2 = fair, 3 = good.
 */
export function SignalBars({ level, size = 18, ...rest }: IconProps & { level: 0 | 1 | 2 | 3 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" {...rest}>
      {[0, 1, 2].map((i) => (
        <rect
          key={i}
          x={4 + i * 6}
          y={16 - i * 5}
          width="3.5"
          height={5 + i * 5}
          rx="1.25"
          fill="currentColor"
          opacity={level > i ? 1 : 0.22}
        />
      ))}
    </svg>
  );
}