import React from "react";
import Image from "next/image";
import styles from "./ProjectCard.module.sass";

export function ProjectCard(props) {
  return (
    <a
      href={props.url}
      key={props.fullName}
      className={[styles.card].concat(props.classNames).join(" ")}
    >
      <Image
        className={props.mockupUrl ? styles.card_mockup : styles.card_gitea}
        src={
          props.mockupUrl
            ? props.mockupUrl
            : props.avatarUrl || "/article_black_48dp.svg"
        }
        alt={props.name}
        width="15"
        height="15"
        unoptimized={true}
      />
      <h2>{props.name}</h2>
      <p>{props.description || "-"}</p>
    </a>
  );
}
