/**
 * 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>
      }
    />
  )
}

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>
      }
    />
  )
}
