---
import ArrowIcon from "../assets/arrow.svg";
import SvgIcon from "../assets/cli.svg";
import ShieldCheckIcon from "../assets/shield-check.svg";
import WebIcon from "../assets/web.svg";
import BaseLayout from "../layouts/BaseLayout.astro";

const pageTitle = "Projects";

const projects = [
  {
    title: "ts-generate-mock-data",
    icon: SvgIcon,
    link: "https://github.com/jhroemer/ts-generate-mock-data",
  },
  {
    title: "www.jensroemer.com",
    icon: WebIcon,
    link: "https://github.com/jhroemer/jhroemer.github.io",
  },
  {
    title: "action-agent-scan",
    icon: ShieldCheckIcon,
    link: "https://github.com/jhroemer/action-agent-scan",
  },
];
---

<style>
  .container {
    padding-top: 40px;
  }

  .card-container {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
  }

  h3 {
    font-weight: 300;
  }

  .card {
    /* TODO: variable */
    border: 2px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    border-radius: 12px;
    background-color: var(--grey-4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 150ms var(--transition-function-1);
    text-decoration: none;

    &:hover {
      background-color: var(--grey-3);

      .project-icon {
        color: var(--text-primary);
      }
    }
  }

  .project-icon {
    color: var(--text-secondary);
    transition: color 150ms var(--transition-function-1);
  }

  .arrow {
    align-self: flex-end;
  }

  .card-body {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
  }
</style>

<BaseLayout pageTitle={pageTitle}>
  <div class="container">
    <div class="card-container">
      {
        projects.map((project) => (
          <a href={project.link} class="card">
            <project.icon size={18} class="project-icon" />
            <div class="card-body">
              <h3>{project.title}</h3>
              <ArrowIcon size={18} class="arrow project-icon" />
            </div>
          </a>
        ))
      }
    </div>
  </div>
</BaseLayout>