<script>
  export let href = '';
  export let type = 'button';
  export let variant = 'primary';
  export let disabled = false;
</script>

{#if href}
  <a href={href} class="retro-button {variant}" class:disabled>
    <span class="button-text"><slot /></span>
    <span class="button-border"></span>
  </a>
{:else}
  <button type={type} class="retro-button {variant}" class:disabled {disabled}>
    <span class="button-text"><slot /></span>
    <span class="button-border"></span>
  </button>
{/if}

<style>
  .retro-button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    background: #000;
    color: #33ff00;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .button-text {
    position: relative;
    z-index: 2;
  }

  .button-border {
    position: absolute;
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #33ff00;
    z-index: 1;
    transition: all 0.3s ease;
  }

  .retro-button:hover .button-border {
    top: -2px;
    left: -2px;
    right: 2px;
    bottom: 2px;
  }

  .retro-button:active .button-border {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .retro-button.secondary {
    color: #ff00ff;
  }

  .retro-button.secondary .button-border {
    border-color: #ff00ff;
  }

  .retro-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .retro-button.disabled:hover .button-border {
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
  }
</style>