"use client";

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

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

const NewsCard: React.FC<INewsCard> = ({
  id,
  image,
  title,
  description,
  date,
}: INewsCard) => {
  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={`/news/${id}`} className="news-card__more-btn">
        Подробнее
      </Link>
    </div>
  );
};

export default NewsCard;
