<script lang="ts">
  export let message: string = "No results found";
  export let size: number = 160;
</script>

<div class="monkey" style="width: {size}px">
  <svg viewBox="0 0 120 120" width="100%" height="100%" aria-hidden="true">
    <!-- head -->
    <circle cx="60" cy="60" r="44" fill="#8B5E3C" />
    <!-- face -->
    <ellipse cx="60" cy="70" rx="30" ry="24" fill="#E8C9A1" />
    <!-- ears -->
    <circle cx="26" cy="56" r="12" fill="#8B5E3C" />
    <circle cx="94" cy="56" r="12" fill="#8B5E3C" />
    <circle cx="26" cy="56" r="6" fill="#E8C9A1" />
    <circle cx="94" cy="56" r="6" fill="#E8C9A1" />
    <!-- eyes -->
    <circle cx="48" cy="64" r="6" fill="#2b2b2b" />
    <circle cx="72" cy="64" r="6" fill="#2b2b2b" />
    <!-- smile -->
    <path
      d="M48 78 Q60 88 72 78"
      stroke="#2b2b2b"
      stroke-width="3"
      fill="none"
      stroke-linecap="round"
    />
    <!-- eyebrow accents -->
    <path
      d="M42 58 Q48 54 54 58"
      stroke="#6b4a33"
      stroke-width="2"
      fill="none"
      stroke-linecap="round"
      opacity="0.6"
    />
    <path
      d="M66 58 Q72 54 78 58"
      stroke="#6b4a33"
      stroke-width="2"
      fill="none"
      stroke-linecap="round"
      opacity="0.6"
    />
    <!-- tiny tuft -->
    <path
      d="M60 28 Q58 34 62 36"
      stroke="#6b4a33"
      stroke-width="3"
      fill="none"
      stroke-linecap="round"
    />
  </svg>
  <div class="msg">{message}</div>
</div>

<style>
  .monkey {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem auto;
  }
  .msg {
    color: #6b7280;
    font-size: 0.95rem;
    text-align: center;
  }
</style>
