import React from "react";
import Image, { StaticImageData } from "next/image";
import Button from "../../atoms/button";
import styles from "./highlight.module.scss";
import { useTranslation } from "next-i18next";
import Link from "next/link";

interface Props {
  title: string;
  des: string;
  logoSrc: string | StaticImageData;
  index: number;
  link: any;
}

const Highlight = ({ title, des, logoSrc, index, link }: Props) => {
  const { t } = useTranslation("common");

  return (
    <article className={styles.highlight}>
      <div className="logo-box">
        <Image src={logoSrc} width={125} height={125} alt="" className="width-full height-full" />
      </div>

      <div className="flex flex-col justify-center flex-grow">
        <h2 className={`title title-${index}`}>{title}</h2>
      </div>

      <div>
        <p className="des line-clamp-3">{des}</p>

        {link && (
          <a href={link} target="_blank" rel="noreferrer">
            <Button>{t("Learn More")}</Button>
          </a>
        )}
      </div>
    </article>
  );
};

export default Highlight;