---
const { text, url_gh, url_mr, url_cf, url_wiki = '', mod = 'default', icon = '' } = Astro.props
import { Icon } from 'astro-icon/components'
---

<div class="rellax container" data-rellax-speed="-1.5">
  <div class={'call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 ' + mod}>
    <h2 class="text-center text-3xl md:text-5xl">
        {icon != '' ? <Icon class='inline pr-2 align-bottom' name={icon} /> : ''}{text}
    </h2>
    <div class="flex flex-col gap-3 min-[800px]:flex-row">
      {
        url_mr != '' ? (
          <a href={url_mr} class={'button has-icon text-lg ' + mod + '-button-primary'}>
            <Icon name="simple-icons:modrinth" />
            Modrinth
          </a>
        ) : (
          ''
        )
      }
      {
        url_cf != '' ? (
          <a href={url_cf} class={'button has-icon text-lg ' + mod + '-button-primary'}>
            <Icon name="simple-icons:curseforge" />
            CurseForge
          </a>
        ) : (
          ''
        )
      }
      {
        url_gh != '' ? (
          <a href={url_gh} class={'button has-icon text-lg ' + mod + '-button-primary'}>
            <Icon name="simple-icons:github" />
            GitHub
          </a>
        ) : (
          ''
        )
      }
      {
        url_wiki != '' ? (
          <a href={url_wiki} class={'button has-icon color-secondary text-lg ' + mod + '-button-secondary'}>
            <Icon name="ion:library" />
            Visit the new Wiki!
          </a>
        ) : (
          ''
        )
      }
    </div>
  </div>
</div>

<style lang="scss">
  .call-to-action {
    color: var(--neutral-900);
    background-image: linear-gradient(40deg, var(--primary-100), var(--secondary-200));
  }
  .midnightcontrols {
    color: var(--neutral-100);
    background-image: linear-gradient(40deg, #e302a4, #9400c6);
  }
  .midnightcontrols-button-primary {
    background-color: #ff6fff;
  }
  .midnightcontrols-button-secondary {
    background-color: #b356ff;
  }

  .call-to-action a:not(button),
  .call-to-action a:not(button):visited {
    vertical-align: top;
    padding: 1rem;
    margin: 0 1rem 0 1rem;
    color: var(--neutral-900);
    font-weight: bold;
    border: 3px solid var(--neutral-900);
    border-radius: 3px;
    text-decoration: none;
    transition:
      color 0.15s ease-in-out,
      background-color 0.15s ease-in-out;

    &:where(:hover, :focus) {
      color: var(--neutral-100);
      background-color: var(--neutral-900);
      text-decoration: underline;
    }
  }
  .neoforge {
    color: var(--neutral-100);
    background-image: linear-gradient(40deg, #d7742f, #ee5577);
  }
  .neoforge-button-primary {
    background-color: #ee5577;
  }
  .neoforge-button-secondary {
    background-color: #d7742f;
  }
</style>