---
import { site, platforms } from "../data/site";
import { getRelease } from "../data/release";

interface Props {
  large?: boolean;
}
const { large = false } = Astro.props;
const release = await getRelease();
---

<div class="dl">
  <a
    class:list={["btn", { "btn--lg": large }]}
    href={site.releasesUrl}
    data-download
    rel="noopener"
    download
  >
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
      <path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
    <span data-dl-label>Download {site.name}</span>
  </a>

  <div class="dl__os">
    {
      platforms.map((p) => (
        <a
          class="dl__chip"
          href={release.urls[p.id]}
          data-download-os={p.id}
          rel="noopener"
          download
          aria-label={`Download for ${p.label}`}
          title={`Download for ${p.label}`}
        >
          <img class="dl__logo" src={`/logos/${p.logo}`} alt={p.label} />
        </a>
      ))
    }
  </div>
</div>

<style>
  .dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .dl__os {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .dl__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-page);
    transition:
      box-shadow 0.18s var(--ease),
      transform 0.18s var(--ease);
  }
  .dl__chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-pop);
  }
  .dl__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
</style>