/** Inline-SVG-Icons (ersetzen die Material-Symbols-Font des Design-Exports). */

export type SeoIconName =
  | 'check_circle'
  | 'calendar'
  | 'healing'
  | 'sun'
  | 'psychology'
  | 'menu'
  | 'close'

const paths: Record<SeoIconName, React.ReactNode> = {
  check_circle: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="m9 12 2 2 4-4" />
    </>
  ),
  calendar: (
    <>
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <path d="M8 3v4M16 3v4M3 10h18" />
    </>
  ),
  healing: (
    <>
      <path d="M12 3v18M3 12h18" transform="rotate(45 12 12)" />
      <path d="M8.5 8.5h.01M15.5 15.5h.01" />
    </>
  ),
  sun: (
    <>
      <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" />
    </>
  ),
  psychology: (
    <>
      <path d="M12 4a7 7 0 0 1 7 7c0 2.4-1.2 4.5-3 5.7V20h-6v-2h-2a2 2 0 0 1-2-2v-2H4l1.6-2.7A7 7 0 0 1 12 4Z" />
      <circle cx="12" cy="11" r="2.2" />
    </>
  ),
  menu: <path d="M4 6h16M4 12h16M4 18h16" />,
  close: <path d="M6 6l12 12M18 6L6 18" />,
}

interface SeoIconProps {
  name: SeoIconName
  className?: string
}

export default function SeoIcon({ name, className = 'w-6 h-6' }: SeoIconProps) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {paths[name]}
    </svg>
  )
}