import { Link } from "@/shared/config/navigation";
import { Title } from "@/shared/ui";
import Image, { StaticImageData } from "next/image";

interface INewsCard {
  id: number;
  image: StaticImageData | string;
  title: string;
  content: string;
  date: string;
}
const NewsCard = ({ id, image, title, content, date }: INewsCard) => {
  const sliceTitle = (title: string) => {
    if (title.length > 35) {
      return `${title.slice(0, 35)}...`;
    }

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

    return content;
  };
  const sliceDate = (date: string) => {
    return `${date.slice(8, 10)}/${date.slice(5, 7)}/${date.slice(0, 4)}`;
  };
  return (
    <div className="w-[393px] h-[508px] bg-white shadow-sm p-6 flex flex-col">
      <Link
        href={{
          pathname: `/news/${id}`,
          query: { новость: title },
        }}
      >
        <Image
          src={image}
          alt="Card image"
          width={345}
          height={240}
          className="mb-[32px]"
        />
        <Title
          text={sliceTitle(title)}
          className="text-[24px] font-semibold mb-[12px]"
        />
        <p className="leading-6 text-gray-600 mb-[46px]">
          {sliceDescription(content)}
        </p>
        <p className="text-[14px] text-gray-600">{sliceDate(date)}</p>
      </Link>
    </div>
  );
};

export default NewsCard;