import Image from "next/image";
import Link from "next/link";
import PersianNumber from "@plug/PersianNumber";
import React from "react";

const Cart = ({ mainImage, title, categoryName, slug, id }) => {
  console.log(`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${mainImage}`);
  return (
    <Link href={`/blogs/${id}/${slug}`}>
      <div className="bg-white rounded-3xl p-2 ">
        <div className="w-full h-[200px] overflow-hidden rounded-3xl">
          <div>
            <Image
              src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${mainImage}`}
              width={500}
              height={500}
              className="w-full h-[200px] object-cover"
              alt={title}
            />
          </div>
        </div>

        <div className="mt-3 text-right ">
          <h3 className=" text-gray-500 font-medium mr-3">{title} </h3>

          <div className="flex justify-end mb-2">
            <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
              <p className="mb-0  text-[12px] text-gray-600">{categoryName}</p>
            </div>

            <div className="bg-secondary-800 rounded-2xl p-1 px-4 mt-3 mx-2">
              <p className="mb-0 text-[12px] text-gray-700 font-medium">
                مقاله را در
                <PersianNumber number={2} />
                دقیقه بخوانید{" "}
              </p>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default Cart;