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

const Cart = ({ mainImage, title, categoryName, slug, id, summery }) => {
  return (
    <Link href={`/blogs/${id}/${slug}`}>
      <div className="bg-gray-100 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"
            />
          </div>
        </div>

        <div className="mt-3 text-right">
          <h3 className=" text-gray-500 font-medium">{title} </h3>
          <p className="mb-0 text-gray-400 text-sm text-right">{summery}</p>
          <div className="flex">
            <div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
              <p className="mb-0 text-sm text-gray-200">{categoryName}</p>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default Cart;