---
import { tt } from "#/copy";
import { Icon as AstroIcon } from "@astrojs/starlight/components";
import GitHubStars from "#/components/blocks/GitHubStars.astro";
import DiscordMembers from "#/components/blocks/DiscordMembers.astro";
import Link from "#/components/Link.astro";

const t = tt.landings.sections.hero.en;
---

<div class="hero-links">
  <Link href={tt.links.github.href}>
    <AstroIcon name="github" class="inline-block h-6" />
    {t.openSource}
    <Fragment slot="badge">
      <AstroIcon name="star" />
      <GitHubStars />
    </Fragment>
  </Link>

  <text-del></text-del>

  <Link t={tt.links.mitLicense} />

  <text-del></text-del>

  <Link href={tt.links.discord.href}>
    <AstroIcon name="discord" class="inline-block h-6" />
    {t.community}
    <Fragment slot="badge">
      <DiscordMembers />
    </Fragment>
  </Link>
</div>

<style>
  @reference "#/styles/global.css";

  .hero-links {
    @apply inline-flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-sm;

    & text-del {
      @apply hidden sm:inline-block;
    }
  }
</style>
