---
import type { Project } from "@/data/projects";

interface Props {
  project: Project;
}

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

<article class="mb-2lh">
  <div class="flex items-baseline gap-1ch mb-half-lh">
    <h3>
      <a
        href={project.githubUrl}
        target="_blank"
        rel="noopener noreferrer"
        class="font-semibold underline"
      >
        {project.title}
      </a>
    </h3>
    {project.statusBadge && (
      <span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
    )}
  </div>

  <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
    {project.description}
  </p>

  <p class="text-[var(--color-text-dim)]">
    {project.tags.join(" · ")}
  </p>
</article>