import { PageUrl } from "configuration/enum";
import moment from "moment";
import { INewspaper } from "pages/interface";
import React from "react";
import { useNavigate } from "react-router-dom";
import { useWindowSize } from "usehooks-ts";

type Props = {
  data: INewspaper;
  firstNews?: boolean;
};

const randomTags = () => {
  const tags = ["success", "info", "secondary", "warning"];
  const idx = Math.floor(Math.random() * tags.length);
  return tags[idx];
};

const Newspaper = (props: Props) => {
  const { data, firstNews = false } = props;
  const { image, title, createdAt, categorylinkNavigation, description, id } =
    data;
  const { width } = useWindowSize();
  const { label } = categorylinkNavigation;
  const navigate = useNavigate();

  const firstNewsCases = firstNews && width >= 768;

  return (
    <div
      className={`newspaper ${firstNewsCases ? "newspaper-first" : ""}`}
      onClick={() => navigate(`${PageUrl.NEWS_ROOT}/${id}`)}
    >
      <div className="newspaper-img">
        <img src={image} alt={title} />
      </div>

      <div className="newspaper-content">
        <div className="">
          <p>{title}</p>
          <div
            className={`newspaper-content__desc mb-2 ${
              firstNews ? "firstNews" : ""
            }`}
          >
            {description}
          </div>
        </div>

        <div className="newspaper-content__footer">
          <div
            className={`newspaper-category newspaper-category__${randomTags()}`}
          >
            {label}
          </div>

          <div className="newspaper-time">
            <span>{moment(new Date(createdAt)).format("DD/MM/YYYY")}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Newspaper;