---
interface ReleaseInfo {
  label?: string
  link: string
  checksum?: string
}

interface PlatformReleases {
  universal?: ReleaseInfo
  all?: ReleaseInfo
  tarball?: ReleaseInfo
  x86_64?: { tarball: ReleaseInfo } | ReleaseInfo
  arm64?: ReleaseInfo
  flathub?: { all: ReleaseInfo }
}

interface Props {
  platform: 'mac' | 'windows' | 'linux'
  icon: string[]
  title: string
  description: string
  releases: PlatformReleases
}

const { platform, icon, title, description, releases } = Astro.props
import { Image } from 'astro:assets'
import AppIconDark from '../../assets/app-icon-dark.png'
import AppIconLight from '../../assets/app-icon-light.png'
import DownloadCard from './ButtonCard.astro'
---

<div
  id={`${platform}-downloads`}
  data-active={platform === 'mac'}
  class="platform-section data-[active='false']:hidden"
>
  <div class="items-center gap-8 md:flex">
    <div class="mb-8 md:mb-0 md:w-2/3">
      <div class="mb-4 flex items-center gap-3">
        <div class="download-card__icon">
          <Fragment set:html={icon} />
        </div>
        <h3 class="text-2xl font-medium">{title}</h3>
      </div>
      <p class="text-muted-foreground mb-6" set:html={description} />
      <div class="space-y-6">
        {
          platform === 'linux' ? (
            <>
              {releases.flathub && releases.flathub.all.label && <div>
                <h4 class="mb-3 text-lg font-medium">Package Managers</h4>
                <div class="space-y-3">
                  <DownloadCard
                    label={releases.flathub.all.label}
                    href={releases.flathub.all.link}
                    variant="flathub"
                  />
                </div>
              </div>}
              {releases.x86_64 && 'tarball' in releases.x86_64 && <div>
                <h4 class="mb-3 text-lg font-medium">Tarball</h4>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                  <DownloadCard
                    label="x86_64"
                    href={releases.x86_64.tarball.link}
                    variant="x86_64"
                    checksum={releases.x86_64.tarball.checksum}
                  />
                  <DownloadCard
                    label="ARM64"
                    href={releases.x86_64.tarball.link}
                    variant="aarch64"
                    checksum={releases.x86_64.tarball.checksum}
                  />
                </div>
              </div>}
            </>
          ) : (
            <div class="space-y-4">
              <div class="space-y-3">
                {releases.universal && releases.universal.label && (
                  <DownloadCard
                    label={releases.universal.label}
                    href={releases.universal.link}
                    checksum={releases.universal.checksum}
                  />
                )}
                {releases.x86_64 && 'tarball' in releases.x86_64 && releases.x86_64.tarball && releases.x86_64.tarball.label && (
                  <DownloadCard
                    label={releases.x86_64.tarball.label}
                    href={releases.x86_64.tarball.link}
                    checksum={releases.x86_64.tarball.checksum}
                  />
                )}
                {releases.arm64 && releases.arm64.label && (
                  <DownloadCard
                    label={releases.arm64.label}
                    href={releases.arm64.link}
                    checksum={releases.arm64.checksum}
                  />
                )}
              </div>
            </div>
          )
        }
      </div>
    </div>
    <div
      class="download-browser-logo flex justify-center text-coral transition-colors data-[twilight='true']:text-zen-blue md:w-1/3"
    >
      <Image
        src={AppIconDark}
        alt="Zen Browser"
        class="w-32 translate-y-6 transform dark:hidden"
      />
      <Image
        src={AppIconLight}
        alt="Zen Browser"
        class="hidden w-32 translate-y-6 transform dark:block"
      />
    </div>
  </div>
</div>
