<script lang="ts">
  import { settings, toggleSound } from '../../stores/settings';
</script>

<button
  class="sound-toggle"
  type="button"
  aria-label={$settings.soundOn ? 'Ton aus' : 'Ton an'}
  onclick={toggleSound}
>
  {#if $settings.soundOn}
    <svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
      <path d="M5 12 L12 12 L20 6 L20 26 L12 20 L5 20 Z" fill="currentColor" />
      <path d="M23 10 Q28 16 23 22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" />
      <path d="M26 6 Q33 16 26 26" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" />
    </svg>
  {:else}
    <svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
      <path d="M5 12 L12 12 L20 6 L20 26 L12 20 L5 20 Z" fill="currentColor" />
      <path d="M22 10 L30 22 M30 10 L22 22" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
    </svg>
  {/if}
</button>

<style>
  .sound-toggle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--c-text-on-dark);
    display: grid;
    place-items: center;
    transition: transform 0.12s ease;
  }
  .sound-toggle:active { transform: scale(0.92); }
</style>
