---
import Section from "../components/Section.astro";
import BodyText from "../components/BodyText.astro";
import SecHeading from "../components/SecHeading.astro";
import SubHeading from "../components/SubHeading.astro";
import Link from "../components/Link.astro";
import LinkButton from "../components/LinkButton.astro";

import { Image } from "astro:assets";
import drfeelycom from "../../public/assets/drfeelycom.png";
import ngen from "../../public/assets/ngen.png";

const { ...rest } = Astro.props;
---

<Section class="mb-7" {...rest}>
  <div class="text-center">
    <SecHeading>PROJECTS</SecHeading>
  </div>
  <div class="flex md:flex-row flex-col justify-around items-center">
    <div class="basis-1/3 my-7">
      <Image
        src={ngen}
        alt="Picture of ngen configuration file"
        class="rounded-lg max-h-96 md:max-h-none"
      />
    </div>
    <div class="basis-1/2 my-7">
      <div>
        <SubHeading>NGEN</SubHeading>
        <BodyText>
          ngen (engine) is a simple makefile generator for the Ninja build
          system. Unlike other, more complex meta build systems, which require
          knowledge of unique configuration languages, ngen uses an
          easy-to-understand key-value file, making build configuration simpler
          and easier for small to medium sized projects.
        </BodyText>
        <Link href="https://git.noahsw.xyz/noah/ngen" target="about:blank">
          Git Repo
        </Link>
      </div>
    </div>
  </div>
  <div class="flex md:flex-row flex-col justify-around items-center">
    <div class="basis-1/2 my-7">
      <div>
        <SubHeading>DRFEELY.COM</SubHeading>
        <BodyText>
          Personal website for Dr. Richard A. Feely, a highly accomplished
          physician from the Chicago area. Features his major articles,
          research, and innovative treatment methods.
        </BodyText>
        <Link href="https://drfeely.com" target="about:blank">Drfeely.com</Link>
        <Link
          href="https://git.noahsw.xyz/noah/drfeely.com"
          target="about:blank"
        >
          Git Repo
        </Link>
      </div>
    </div>
    <div class="basis-1/3 my-7">
      <Image
        src={drfeelycom}
        alt="Picture of ngen configuration file"
        class="rounded-lg max-h-96 md:max-h-none"
      />
    </div>
  </div>
  <div class="flex justify-around mt-10">
    <LinkButton href="https://git.noahsw.xyz">
      View all projects at git.noahsw.xyz
    </LinkButton>
  </div>
</Section>
