import type { CSSProperties } from 'react'

interface Props {
  size?: string | number
  style?: CSSProperties
  className?: string
}

/** Reusable gerbil silhouette icon — upright sitting pose, long tail with tuft. fill=currentColor. */
export default function GerbilIcon({ size = '1em', style, className }: Props) {
  return (
    <svg
      viewBox="0 0 64 64"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      style={{ display: 'inline-block', verticalAlign: '-0.125em', flexShrink: 0, ...style }}
      className={className}
      role="img"
      aria-label="Rennmaus"
    >
      {/* body — sitting upright */}
      <path d="M 34 23 C 38 20, 44 21, 46 25 C 47 27, 45 30, 41 31 C 38 32, 40 38, 40 42 C 40 48, 36 51, 31 52 C 25 52, 21 47, 21 40 C 21 31, 27 25, 34 23 Z" />
      {/* ears */}
      <path d="M 36 22 Q 33 13 39 11 Q 42 13 39 21 Z" />
      <path d="M 32 23 Q 30 15 35 13 Q 37 15 35 22 Z" opacity="0.6" />
      {/* front paw */}
      <path d="M 41 33 Q 46 33 46 36 Q 44 38 41 35 Z" />
      {/* hind paw */}
      <path d="M 21 49 C 19 53, 23 55, 30 55 C 33 55, 34 52, 30 50 Z" />
      {/* tail and tuft */}
      <path d="M 21 47 C 14 51, 9 46, 8 41 C 7 35, 11 27, 16 22 C 17 21, 18 22, 17 23 C 13 28, 10 35, 11 40 C 12 44, 15 47, 21 44 Z" />
      <path d="M 16 22 C 16 16, 13 11, 16 7 C 20 3, 22 10, 19 16 C 18 19, 17 21, 16 22 Z" />
    </svg>
  )
}
