---
import type { Project } from "@/types";
import IconTooltip from "@/components/IconTooltip.astro";
import { ArchiveIcon, ExternalLinkIcon, GithubIcon, GitlabIcon } from "@/components/icons";

interface Props {
  project: Project;
}

const { project } = Astro.props;
const href = project.link || project.git_link || "#";
const isGitlab = project.git_link?.includes("gitlab.com");
---
<div
  class="flex w-full min-w-0 flex-row items-baseline gap-2 rounded-xl bg-secondary px-4 py-2 text-lg
         drop-shadow-sm dark:bg-dark-secondary"
>
  <a
    href={href}
    target="_blank"
    rel="noreferrer"
    class="flex flex-row items-baseline gap-2 min-w-0 flex-grow hover:opacity-70"
  >
    <span class="font-medium whitespace-nowrap">{project.full_name || project.name}</span>
    <span class="min-w-0 truncate text-sm text-secondary-text">{project.description}</span>
  </a>
  <span class="w-5 shrink-0 flex justify-center">
    {project.git_link && (
      <IconTooltip label={isGitlab ? "GitLab" : "GitHub"}>
        <a
          href={project.git_link}
          target="_blank"
          rel="noreferrer"
          class="text-secondary-text hover:opacity-70"
          aria-label={`${project.full_name || project.name} on ${isGitlab ? "GitLab" : "GitHub"}`}
        >
          {isGitlab ? <GitlabIcon /> : <GithubIcon />}
        </a>
      </IconTooltip>
    )}
  </span>
  <!-- an archived project has nowhere live to link to, so its badge takes the website's place -->
  <span class="w-5 shrink-0 flex justify-center text-secondary-text">
    {project.status === "archived" ? (
      <IconTooltip label="archived">
        <ArchiveIcon aria-hidden="true" />
        <span class="sr-only">archived</span>
      </IconTooltip>
    ) : project.link && (
      <IconTooltip label="website">
        <a
          href={project.link}
          target="_blank"
          rel="noreferrer"
          class="text-secondary-text hover:opacity-70"
          aria-label={`${project.full_name || project.name} website`}
        >
          <ExternalLinkIcon />
        </a>
      </IconTooltip>
    )}
  </span>
</div>