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="M40 14c6 0 11 5 11 12 0 4-2 7-2 11 0 10-6 16-15 16-8 0-14-6-14-15 0-13 9-24 20-24z" />
      {/* ear */}
      <circle cx="46" cy="15" r="5" />
      {/* hind paw */}
      <ellipse cx="24" cy="52" rx="9" ry="3.5" />
      {/* long curved tail with tuft */}
      <path d="M16 51c-7 1-13-2-15-9-1-4 0-8 3-10 1 3 1 6 3 8 3 3 7 4 11 4z" />
      {/* front paw */}
      <path d="M30 45c3 0 5 1 5 4-3 1-6 1-7-2 0-1 1-2 2-2z" />
    </svg>
  )
}