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}
        alt={props.name}
        width="15vw"
        height="15vw"
        unoptimized={true}
      />
      <h2>{props.name}</h2>
      <p>{props.description || "-"}</p>
    </a>
  );
}

ProjectCard.defaultProps = {
  avatarUrl: "/article_black_48dp.svg",
};