import Image from "next/image";
import React from "react";
import Button from "../../atoms/button";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import classNames from "classnames";

interface Props {
  id: string;
  name: string;
  des: string;
  img: string;
  time: string;
  isVertical?: boolean;
  isWithoutCard?: boolean;
}

const Blog = ({ id, name, des, img, time, isVertical = false, isWithoutCard = false }: Props) => {
  const { t } = useTranslation("common");

  return (
    <article>
      <div
        className={classNames("p-3 gap-2.5", {
          "items-center border-color-2 border": !isWithoutCard,
          "lg:flex": !isVertical,
        })}
      >
        <div
          className={classNames("relative lg:ltr:mr-2 lg:rtl:ml-2 mb-4 flex-2 ", {
            "lg:h-[300px] 2xl:h-[425px]": isWithoutCard,
            "h-[180px] md:h-[250px] lg:h-[150px] 2xl:h-[180px]": !isWithoutCard,
            "lg:mb-4": isVertical,
            "lg:mb-0": !isVertical,
          })}
        >
          <Image src={img} alt="" fill className={classNames("w-full h-full object-cover")} />
        </div>

        <div className="flex-3">
          <div className="text-grey-2 font-bold mb-3">{time}</div>

          <h3
            className={classNames("mb-3 text-lg", {
              "line-clamp-1": !isWithoutCard,
            })}
          >
            {name}
          </h3>

          <div
            className={classNames(" mb-3", {
              "line-clamp-3": !isWithoutCard,
            })}
            dangerouslySetInnerHTML={{ __html: des }}
          ></div>

          {!isWithoutCard && (
            <Link href={`/article/${id}`} className="underline text-color-2">
              {t("Read More")}
            </Link>
          )}
        </div>
      </div>
    </article>
  );
};

export default Blog;