"use client";

import Image, { StaticImageData } from "next/image";
import "./NewsCard.scss";
import Link from "next/link";
import { useTranslations } from "next-intl";

interface INewsCard {
  id: number;
  image: StaticImageData | string;
  title: string;
  description: string;
  date: string;
}

const NewsCard: React.FC<INewsCard> = ({
  id,
  image,
  title,
  description,
  date,
}: INewsCard) => {
  const t = useTranslations("general");
  const sliceTitle = (title: string) => {
    if (title.length > 35) {
      return `${title.slice(0, 35)}...`;
    }

    return title;
  };
  const sliceDate = (date: string) => {
    return `${date.slice(8, 10)}/${date.slice(5, 7)}/${date.slice(
      0,
      4
    )}`;
  };

  const sliceDescription = (description: string) => {
    if (description.length > 65) {
      return `${description.slice(0, 65)}...`;
    }

    return description;
  };
  return (
    <div className="news-card">
      <Image
        src={image}
        alt="Card Image"
        width={250}
        height={160}
        blurDataURL="blur"
      />

      <div className="news-card__text">
        <h5 className="news-card__date">{sliceDate(date)}</h5>
        <h4>{sliceTitle(title)}</h4>
        <p>{sliceDescription(description)}</p>
      </div>

      <Link
        href={{
          pathname: `/news/${id}`,
          query: { новость: title },
        }}
        className="news-card__more-btn"
      >
        {t("details")}
      </Link>
    </div>
  );
};

export default NewsCard;