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

import Button from "../../atoms/button";
import styles from "./ServiceCard.module.scss";
import Link from "next/link";

interface Props {
  id: number;
  coverImage: string;
  icon: string | StaticImageData;
  name: string;
}

const ServiceCard = ({ id, coverImage, icon, name }: Props) => {
  const { t } = useTranslation("common");

  return (
    <article className={styles.serviceCard}>
      <div className="service-card-image relative">
        <Image src={coverImage} alt="" fill />
      </div>

      <div className="content">
        <div className="icon mb-7">
          <Image src={icon} alt="" width={50} height={50} />
        </div>

        <h3 className="title text-gradiant mb-7">{name}</h3>

        <Link href={`/services/${id}`}>
          <Button>{t("Learn More")}</Button>
        </Link>
      </div>
    </article>
  );
};

export default ServiceCard;