---
import Icon from "./Icon.astro";
import type { Project } from "../data/content";

const STATUS: Record<Project["status"], { label: string; color: string }> = {
  live: { label: "en ligne", color: "var(--accent)" },
  dev: { label: "en développement", color: "var(--warn)" },
  archived: { label: "archivé", color: "var(--text-dim)" },
  oss: { label: "open-source", color: "var(--info)" },
};

interface Props { project: Project; }
const { project: p } = Astro.props;
const st = STATUS[p.status];
const mono = p.title.replace(/[^A-Za-z0-9]/g, "").slice(0, 2);

// Toute la carte devient cliquable (nouvel onglet) dès qu'un lien est défini.
const Tag = p.link ? "a" : "article";
const linkAttrs = p.link
  ? { href: p.link, target: "_blank", rel: "noopener", "aria-label": `${p.title}, voir le projet (nouvel onglet)` }
  : {};
---
<Tag class:list={["card", p.link && "card--link"]} {...linkAttrs}>
  <div class:list={["card-media", p.imgDark && "card-media--themed"]}>
    {p.img ? (
      <>
        <img class="logo-light" src={p.img} alt={p.title} loading="lazy" />
        {p.imgDark && <img class="logo-dark" src={p.imgDark} alt={p.title} loading="lazy" />}
      </>
    ) : (
      <div class="card-mono"><span>{mono}</span></div>
    )}
  </div>
  <div class="card-body">
    <div class="card-head">
      <span class="status"><span class="status-dot" style={`background:${st.color}`}></span>{st.label}</span>
      {p.link && (
        <span class="ext-link" aria-hidden="true">
          <Icon name="external" size={16} />
        </span>
      )}
    </div>
    <h3 class="card-title">{p.title}</h3>
    <p class="card-sub">{p.subtitle}</p>
    <p class="card-desc">{p.desc}</p>
    <div class="chips">
      {p.stack.map((s) => <span class="chip">{s}</span>)}
    </div>
  </div>
</Tag>