import React from "react";
import Image from "next/image";
import { useTranslation } from "next-i18next";

import styles from "./ProjectCard.module.scss";
import Link from "next/link";

interface Props {
  id: number | string;
  name: string;
  img: string;
}

const ProjectCard = ({ id, name, img }: Props) => {
  const { t } = useTranslation("common");

  return (
    <article className={styles.projectCard}>
      <h3>{name}</h3>

      <div className="relative project-card-image">
        <Link href={`projects/${id}`}>
          <Image src={img} alt="" fill />
        </Link>
      </div>
    </article>
  );
};

export default ProjectCard;