import type { ReactNode, SVGProps } from "react";

/** Custom icon set. One stroke weight (1.5), currentColor: white by default, #217cff + glow when
 * the parent has .active (see .icon in app.css). Always pair with a plain text label. */

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

function Icon({ size = 20, children, ...rest }: P & { children: ReactNode }) {
  return (
    <svg
      className="icon"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...rest}
    >
      {children}
    </svg>
  );
}

export const RadarIcon = (p: P) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <circle cx="12" cy="12" r="5" />
    <path d="M12 12l6-6" />
    <circle cx="15.5" cy="9" r="0.8" fill="currentColor" />
  </Icon>
);

export const PlanetIcon = (p: P) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="6" />
    <ellipse cx="12" cy="12" rx="10.5" ry="3.5" transform="rotate(-20 12 12)" />
  </Icon>
);

export const SatelliteDishIcon = (p: P) => (
  <Icon {...p}>
    <path d="M4 10a8 8 0 0 0 10 10L4 10z" />
    <path d="M9 15l4-4" />
    <path d="M14 4a6 6 0 0 1 6 6" />
    <path d="M14 7.5a2.5 2.5 0 0 1 2.5 2.5" />
    <path d="M6 21h6" />
  </Icon>
);

export const TelescopeIcon = (p: P) => (
  <Icon {...p}>
    <path d="M3 13l12-6 2 4-12 6z" />
    <path d="M15 7l3-1.5 2 4L17 11" />
    <path d="M10 15l-3 6M10 15l3 6" />
  </Icon>
);

export const ConstellationIcon = (p: P) => (
  <Icon {...p}>
    <path d="M5 18l5-6 4 3 5-9" opacity="0.6" />
    <circle cx="5" cy="18" r="1.2" fill="currentColor" />
    <circle cx="10" cy="12" r="1.2" fill="currentColor" />
    <circle cx="14" cy="15" r="1.2" fill="currentColor" />
    <circle cx="19" cy="6" r="1.2" fill="currentColor" />
  </Icon>
);

export const HelmetIcon = (p: P) => (
  <Icon {...p}>
    <path d="M4 14a8 8 0 1 1 16 0v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z" />
    <rect x="7" y="9" width="10" height="6" rx="3" />
    <path d="M14.5 11l1 1" />
  </Icon>
);

export const SignalIcon = (p: P) => (
  <Icon {...p}>
    <path d="M3 12h2M7 8v8M11 5v14M15 8v8M19 10v4M21 12h0" />
  </Icon>
);

export const LaunchWindowIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="6" width="13" height="12" rx="2" />
    <path d="M16 10l5-3v10l-5-3" />
    <path d="M9.5 15v-5.5l1.5-1.5 1.5 1.5V15" />
  </Icon>
);

export const RocketIcon = (p: P) => (
  <Icon {...p}>
    <path d="M12 2c3 2.5 4.5 6 4.5 10L14 16h-4l-2.5-4C7.5 8 9 4.5 12 2z" />
    <circle cx="12" cy="9" r="1.6" />
    <path d="M7.5 12L5 15l3 1M16.5 12l2.5 3-3 1" />
    <path d="M10.5 19l1.5 3 1.5-3" />
  </Icon>
);

export const LaunchpadIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="5" width="18" height="16" rx="2" />
    <path d="M3 9h18M8 3v4M16 3v4" />
    <path d="M12 12v6M10 16l2 2 2-2" />
  </Icon>
);

export const AsteroidIcon = (p: P) => (
  <Icon {...p}>
    <path d="M7 5l6-1 5 4 1 6-4 5-7 0-4-5 1-6z" />
    <circle cx="10" cy="10" r="1.2" />
    <circle cx="14.5" cy="14" r="1.6" />
  </Icon>
);

export const CometIcon = (p: P) => (
  <Icon {...p}>
    <circle cx="16" cy="8" r="3" />
    <path d="M13.5 10.5L3 21M14 12l-6 6M12 9l-6 3" opacity="0.7" />
  </Icon>
);

export const OrbitIcon = (p: P) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="2.5" />
    <circle cx="12" cy="12" r="8.5" strokeDasharray="2 3" />
    <circle cx="20.5" cy="12" r="1.2" fill="currentColor" />
  </Icon>
);

export const ArrowRightIcon = (p: P) => (
  <Icon {...p}>
    <path d="M5 12h14M13 6l6 6-6 6" />
  </Icon>
);

export const CheckIcon = (p: P) => (
  <Icon {...p}>
    <path d="M5 12.5l4.5 4.5L19 7.5" />
  </Icon>
);

export const SparkleIcon = (p: P) => (
  <Icon {...p}>
    <path d="M12 3l1.8 7.2L21 12l-7.2 1.8L12 21l-1.8-7.2L3 12l7.2-1.8z" />
  </Icon>
);

export const UploadIcon = (p: P) => (
  <Icon {...p}>
    <path d="M12 15V4M7.5 8.5L12 4l4.5 4.5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4" />
  </Icon>
);

export const DownloadIcon = (p: P) => (
  <Icon {...p}>
    <path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4" />
  </Icon>
);

/** A stack of media with a play mark on the front: the Library (what you made, your videos and your voices). */
export const LibraryIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="8" width="18" height="12.5" rx="2.5" />
    <path d="M5.5 5h13M8 2.5h8" />
    <path d="M10.25 11.6v5.3l4.4-2.65z" />
  </Icon>
);

/** A video camera: the Videos section. */
export const VideoIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="6.5" width="12.5" height="11" rx="2.5" />
    <path d="M15.5 10.5l4.6-2.7a.6.6 0 0 1 .9.5v7.4a.6.6 0 0 1-.9.5l-4.6-2.7" />
  </Icon>
);

/** A microphone with sound waves: the Voices section. */
export const MicIcon = (p: P) => (
  <Icon {...p}>
    <rect x="9" y="3" width="6" height="11" rx="3" />
    <path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6" />
    <path d="M2.5 9v3M21.5 9v3" />
  </Icon>
);

export const FilmIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="5" width="18" height="14" rx="2" />
    <path d="M7 5v14M17 5v14M3 9.5h4M3 14.5h4M17 9.5h4M17 14.5h4" />
  </Icon>
);

/** Points down; rotate it (e.g. .chevron.open) to point up. Mitred, not rounded, for a sharp tip. */
export const ChevronIcon = (p: P) => (
  <Icon strokeWidth={2} strokeLinecap="square" strokeLinejoin="miter" {...p}>
    <path d="M6 9l6 6 6-6" />
  </Icon>
);

export const TrashIcon = (p: P) => (
  <Icon {...p}>
    <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6" />
  </Icon>
);

/** Headphones: the audio overview. */
export const HeadphonesIcon = (p: P) => (
  <Icon {...p}>
    <path d="M4 15v-3a8 8 0 0 1 16 0v3" />
    <rect x="3" y="14" width="4.5" height="6.5" rx="1.8" />
    <rect x="16.5" y="14" width="4.5" height="6.5" rx="1.8" />
  </Icon>
);

/** A page with a heading and lines: the report. */
export const ReportIcon = (p: P) => (
  <Icon {...p}>
    <path d="M6 3h8.5L19 7.5V19a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
    <path d="M14 3v5h5M8 12h8M8 15.5h8M8 8.5h3" />
  </Icon>
);

/** Short lines of text, the last one shorter: a summary. */
export const SummaryIcon = (p: P) => (
  <Icon {...p}>
    <path d="M4 6h16M4 10.5h16M4 15h16M4 19.5h9" />
  </Icon>
);

/** Bars on a baseline inside a frame: an infographic. */
export const InfographicIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="3" width="18" height="18" rx="2.5" />
    <path d="M8 17v-5M12 17V8M16 17v-3" />
  </Icon>
);

/** A slide on a stand, a second one behind it: a slide deck. */
export const SlidesIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="4" width="15" height="10.5" rx="1.8" />
    <path d="M6.5 1.9h12.7A1.8 1.8 0 0 1 21 3.7v8.6" />
    <path d="M10.5 14.5V19M7 21h7M6.5 8h5M6.5 11h8" />
  </Icon>
);

/** A play triangle: present a deck. */
export const PlayIcon = (p: P) => (
  <Icon {...p}>
    <path d="M7.5 5.2v13.6a.8.8 0 0 0 1.2.7l10.6-6.8a.8.8 0 0 0 0-1.4L8.7 4.5a.8.8 0 0 0-1.2.7z" />
  </Icon>
);

/** Four corners pointing out: show larger. */
export const ExpandIcon = (p: P) => (
  <Icon {...p}>
    <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
  </Icon>
);

/** Four corners pointing in: back to the normal size. */
export const CollapseIcon = (p: P) => (
  <Icon {...p}>
    <path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" />
  </Icon>
);

/** Three dots, stacked: more actions. */
export const MoreIcon = (p: P) => (
  <Icon {...p}>
    <circle cx="12" cy="5.5" r="1.1" fill="currentColor" />
    <circle cx="12" cy="12" r="1.1" fill="currentColor" />
    <circle cx="12" cy="18.5" r="1.1" fill="currentColor" />
  </Icon>
);

/** A framed PDF mark: a PDF file. */
export const PdfIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="4" width="18" height="16" rx="2.5" />
    <text x="12" y="15" textAnchor="middle" fontSize="6.4" fontWeight="700" fill="currentColor" stroke="none"
          fontFamily="Inter, sans-serif">PDF</text>
  </Icon>
);

/** A framed P: a PowerPoint file. */
export const PptxIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="4" width="18" height="16" rx="2.5" />
    <path d="M10 16V8h2.8a2.3 2.3 0 0 1 0 4.6H10" />
  </Icon>
);

/** A question mark in a circle: the quiz. */
export const QuizIcon = (p: P) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M9.5 9.5a2.6 2.6 0 0 1 5 .9c0 1.7-2.5 2.2-2.5 3.8M12 17.2v.01" />
  </Icon>
);

/** Two cards, one behind the other: flashcards. */
export const FlashcardsIcon = (p: P) => (
  <Icon {...p}>
    <rect x="3" y="7" width="14" height="11" rx="2" />
    <path d="M7 7V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2" />
    <path d="M7 12.5h6" />
  </Icon>
);