/**
 * Symbole als React-Bausteine. Aus dem alten Panel übernommen (dort als
 * SVG-Fragmente in Zeichenketten), damit App und Panel identisch aussehen.
 * Bewusst keine Symbolbibliothek: es sind eine Handvoll, und jede Bibliothek
 * wäre größer als der gesamte Rest.
 */

import type { ReactElement } from "react"

// Ausdrücklich `| undefined`, weil exactOptionalPropertyTypes eingeschaltet ist:
// ein durchgereichtes `groesse={undefined}` muss zulässig bleiben.
interface SymbolProps {
  groesse?: number | undefined
}

function Rahmen({ groesse = 24, kinder }: SymbolProps & { kinder: ReactElement }) {
  return (
    <svg
      width={groesse}
      height={groesse}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {kinder}
    </svg>
  )
}

export function SymbolUebersicht({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <path d="M4 17a9 9 0 0 1 18 0" />
          <path d="M13 17l5.5-5" />
          <circle cx="13" cy="17" r="1.3" />
        </g>
      }
    />
  )
}

export function SymbolAudi({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={<polygon points="21.6,5 16.5,19 2.4,19 7.5,5" />}
    />
  )
}

export function SymbolFahrten({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <circle cx="6" cy="6" r="2.2" />
          <circle cx="18" cy="18" r="2.2" />
          <path d="M8 7.5c4 1.5 4.5 3 3 5s-1 3.5 4.5 5" />
        </g>
      }
    />
  )
}

export function SymbolStatistik({ groesse }: SymbolProps) {
  return <Rahmen groesse={groesse} kinder={<path d="M4 20V9.5M10 20V4.5M16 20v-8M22 20H2" />} />
}

export function SymbolTanken({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <path d="M4.5 20V6.2c0-.9.8-1.7 1.7-1.7h5.6c1 0 1.7.8 1.7 1.7V20" />
          <path d="M3 20h12.5" />
          <path d="M4.5 11h10.5" />
          <path d="M17 20v-8.5a2 2 0 0 0-2-2" />
          <path d="M17 11.5V7.8l-2-2.3" />
        </g>
      }
    />
  )
}

export function SymbolZurueck({ groesse }: SymbolProps) {
  return <Rahmen groesse={groesse} kinder={<path d="M15 5l-7 7 7 7" />} />
}

export function SymbolZahnrad({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <circle cx="12" cy="12" r="3" />
          <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1" />
        </g>
      }
    />
  )
}

export function SymbolSonne({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <circle cx="12" cy="12" r="4.5" />
          <path d="M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.7 4.7l1.7 1.7M17.6 17.6l1.7 1.7M19.3 4.7l-1.7 1.7M6.4 17.6l-1.7 1.7" />
        </g>
      }
    />
  )
}

export function SymbolMond({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={<path d="M19.5 14.4A8.4 8.4 0 1 1 9.6 4.5a6.7 6.7 0 0 0 9.9 9.9z" />}
    />
  )
}

export function SymbolMehr({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <circle cx="5" cy="12" r="1.4" />
          <circle cx="12" cy="12" r="1.4" />
          <circle cx="19" cy="12" r="1.4" />
        </g>
      }
    />
  )
}

/**
 * oil-change-s/inspection-s aus dem Audi-CI-Icon-Satz (vom Nutzer als SVG
 * geliefert, verbatim übernommen — 24er-Grid, wie im Panel als CI.oilChangeS/
 * CI.inspectionS). Anders als die generischen Rahmen()-Symbole oben sind das
 * gefüllte Flächen-Icons, deshalb kein stroke-Wrapper.
 */
function RahmenFlaeche({ groesse = 24, kinder }: SymbolProps & { kinder: ReactElement }) {
  return (
    <svg width={groesse} height={groesse} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      {kinder}
    </svg>
  )
}

export function SymbolOelwechsel({ groesse }: SymbolProps) {
  return (
    <RahmenFlaeche
      groesse={groesse}
      kinder={
        <path
          fill="currentColor"
          d="M9 8H7.5V7h4v1H10v2h2.77l.94 1.41 7.93-2.48 2.21 2.22-.7.7-1.79-1.78-1.03.32L15.25 17H4v-6.8L2.8 9H0V8h3.2l2 2H9zm-4 3v5h9.75l3.92-5.1-5.38 1.69L12.23 11z"
        />
      }
    />
  )
}

export function SymbolInspektion({ groesse }: SymbolProps) {
  return (
    <RahmenFlaeche
      groesse={groesse}
      kinder={
        <path
          fill="currentColor"
          d="M3.3 0H5v3.3l.7.7h2.6l.7-.7V0h1.7L13 2.3v4.4l-3 3V21c0 .69-.3 1.42-.76 1.98A2.57 2.57 0 0 1 7.3 24h-.6c-.79 0-1.47-.42-1.93-.98A3.22 3.22 0 0 1 4 21V9.7l-3-3V2.3zm.4 1L2 2.7v3.6l3 3V21c0 .47.2.98.53 1.38.34.4.76.62 1.17.62h.6c.4 0 .82-.24 1.16-.65.34-.42.54-.94.54-1.35V9.3l3-3V2.7L10.3 1H10v2.7L8.7 5H5.3L4 3.7V1zm12.44-1h3.72L21 3.42V6.7l-1 1V14h1v7.5a2.5 2.5 0 0 1-2.5 2.5h-1a2.5 2.5 0 0 1-2.5-2.5V14h1V7.7l-1-1V3.43zM16 15v6.5c0 .82.68 1.5 1.5 1.5h1c.82 0 1.5-.68 1.5-1.5V15zm3-1V7.3l1-1V3.57L19.14 1h-2.28L16 3.58V6.3l1 1V14z"
        />
      }
    />
  )
}

export function SymbolWarnung({ groesse }: SymbolProps) {
  return (
    <Rahmen
      groesse={groesse}
      kinder={
        <g>
          <path d="M12 4.5 2.5 20h19z" />
          <path d="M12 10v4.5" />
          <circle cx="12" cy="17.3" r="0.9" fill="currentColor" stroke="none" />
        </g>
      }
    />
  )
}
