---
import Section from "@components/content/Section.astro";
import ProjectCard from "@components/projects/ProjectCard.astro";
import { YZZO_LIVE_URL, YZZO_REPO_URL, NYX_REPO_URL } from "@constants";
import yzzoImage from "@assets/projects/yzzo-overview.png";
import nyxImage1 from "@assets/projects/nyx-1.png";
import nyxImage2 from "@assets/projects/nyx-2.png";
import nyxImage3 from "@assets/projects/nyx-3.png";
import nyxImage4 from "@assets/projects/nyx-4.png";
---

<Section heading="Selected work">
  <div class="flex flex-col gap-12">
    <ProjectCard
      title="YZZO"
      description="A clipboard manager built for simplicity and productivity."
      website={{
        href: YZZO_LIVE_URL,
        external: true,
        track: true,
        trackEvent: "website-btn-yzzo",
      }}
      repository={YZZO_REPO_URL}
      repositoryTrackEvent="repository-btn-yzzo"
      images={[
        {
          src: yzzoImage,
          alt: "An overview of YZZO's clipboard manager.",
        },
      ]}
    />
    <ProjectCard
      title="Nyx"
      description="A theme for Zed code editor."
      repository={NYX_REPO_URL}
      repositoryTrackEvent="repository-btn-nyx"
      images={[
        {
          src: nyxImage1,
          alt: "An overview of Nyx theme.",
        },
        {
          src: nyxImage2,
          alt: "An overview of Nyx theme.",
        },
        {
          src: nyxImage3,
          alt: "An overview of Nyx theme.",
        },
        {
          src: nyxImage4,
          alt: "An overview of Nyx theme.",
        },
      ]}
    />
    <p class="text-lg text-center font-medium text-content-secondary">
      🚧 More projects coming soon!
    </p>
  </div>
</Section>