function DecorShape({ className, children }) {
  return (
    <span className={`wowext-onboarding__decor-shape ${className}`} aria-hidden="true">
      {children}
    </span>
  );
}

export default function OnboardingMainDecor() {
  return (
    <div className="wowext-onboarding__main-decor" aria-hidden="true">
      <span className="wowext-onboarding__decor-blob wowext-onboarding__decor-blob--a" />
      <span className="wowext-onboarding__decor-blob wowext-onboarding__decor-blob--b" />
      <span className="wowext-onboarding__decor-blob wowext-onboarding__decor-blob--c" />

      <DecorShape className="wowext-onboarding__decor-shape--cart">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25">
          <circle cx="9" cy="20" r="1.25" />
          <circle cx="17" cy="20" r="1.25" />
          <path d="M2 3h2l2.2 10.4a1.5 1.5 0 0 0 1.5 1.2h9.1a1.5 1.5 0 0 0 1.5-1.2L21 7H6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </DecorShape>

      <DecorShape className="wowext-onboarding__decor-shape--tag">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25">
          <path d="M20 12V5.5A1.5 1.5 0 0 0 18.5 4H12L4 12l8 8 8-8Z" strokeLinejoin="round" />
          <circle cx="15.5" cy="8.5" r="1.25" />
        </svg>
      </DecorShape>

      <DecorShape className="wowext-onboarding__decor-shape--puzzle">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25">
          <path
            d="M10 4h4v2.5a1.5 1.5 0 0 0 3 0V4h2.5a1.5 1.5 0 0 1 0 3H17v4h2.5a1.5 1.5 0 0 1 0 3H17v2.5a1.5 1.5 0 0 0-3 0V14h-4v2.5a1.5 1.5 0 0 1-3 0V14H4.5a1.5 1.5 0 0 1 0-3H7v-4H4.5a1.5 1.5 0 0 1 0-3H7V4a1.5 1.5 0 0 1 3 0V7h4V4Z"
            strokeLinejoin="round"
          />
        </svg>
      </DecorShape>

      <DecorShape className="wowext-onboarding__decor-shape--package">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25">
          <path d="M12 3 3 7.5 12 12l9-4.5L12 3Z" strokeLinejoin="round" />
          <path d="M3 7.5V16.5L12 21l9-4.5V7.5" strokeLinejoin="round" />
          <path d="M12 12v9" strokeLinecap="round" />
        </svg>
      </DecorShape>

      <DecorShape className="wowext-onboarding__decor-shape--percent">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25">
          <circle cx="7.5" cy="7.5" r="2.25" />
          <circle cx="16.5" cy="16.5" r="2.25" />
          <path d="m19 5-14 14" strokeLinecap="round" />
        </svg>
      </DecorShape>

      <DecorShape className="wowext-onboarding__decor-shape--card">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 10h18" strokeLinecap="round" />
          <path d="M7 15h4" strokeLinecap="round" />
        </svg>
      </DecorShape>
    </div>
  );
}