<script>
  // size: 'sm' | 'md' | 'lg'
  // label: optional text shown below (lg only)
  let { size = 'md', label = null } = $props();
</script>

{#if size === 'sm'}
  <!-- Compact dot-pulse for buttons -->
  <span class="dot-pulse">
    <span></span><span></span><span></span>
  </span>
{:else}
  <!-- Market chart line animation for md / lg -->
  <div class="chart-wrap" data-size={size}>
    <svg
      viewBox="0 0 160 60"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="chart-svg"
      aria-hidden="true"
    >
      <!-- Faint grid lines -->
      <line x1="0" y1="15" x2="160" y2="15" stroke="#1e293b" stroke-width="1" />
      <line x1="0" y1="30" x2="160" y2="30" stroke="#1e293b" stroke-width="1" />
      <line x1="0" y1="45" x2="160" y2="45" stroke="#1e293b" stroke-width="1" />

      <!-- The market line — rises, dips, spikes, recovers -->
      <polyline
        class="chart-line"
        points="
          0,45
          12,38
          22,42
          32,28
          42,32
          52,18
          62,24
          72,14
          82,20
          92,10
          104,22
          114,16
          124,28
          134,20
          148,8
          160,12
        "
      />

      <!-- Glowing dot at the leading edge -->
      <circle class="chart-dot" cx="160" cy="12" r="3" />
    </svg>

    {#if label}
      <span class="chart-label">{label}</span>
    {/if}
  </div>
{/if}

<style>
  /* ── Dot pulse (sm) ─────────────────────────────────────────────── */
  .dot-pulse {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  .dot-pulse span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #60a5fa;
    animation: dot-bounce 0.9s ease-in-out infinite;
  }

  .dot-pulse span:nth-child(2) { animation-delay: 0.15s; }
  .dot-pulse span:nth-child(3) { animation-delay: 0.30s; }

  @keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
  }

  /* ── Chart wrap (md / lg) ───────────────────────────────────────── */
  .chart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .chart-wrap[data-size="md"] .chart-svg { width: 120px; height: 45px; }
  .chart-wrap[data-size="lg"] .chart-svg { width: 200px; height: 75px; }

  .chart-svg { overflow: visible; }

  /* The animated line */
  .chart-line {
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    /* total path length ≈ 220 — animate draw-in then loop */
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: draw-line 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  @keyframes draw-line {
    0%   { stroke-dashoffset: 220; opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    85%  { stroke-dashoffset: 0;   opacity: 0; }
    100% { stroke-dashoffset: 220; opacity: 0; }
  }

  /* Glowing dot that appears when the line finishes drawing */
  .chart-dot {
    fill: #3b82f6;
    filter: drop-shadow(0 0 4px #3b82f6);
    opacity: 0;
    animation: dot-appear 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  @keyframes dot-appear {
    0%   { opacity: 0; }
    60%  { opacity: 0; }
    70%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
  }

  .chart-label {
    font-size: 12px;
    color: #475569;
    letter-spacing: 0.02em;
  }
</style>
