import Link from "next/link";
import React from "react";
import Image from "next/image";
import { Button } from "antd";
import { DeleteOutlined } from "@ant-design/icons";

function SingleAd({ ad, index, currentItem, deleteItemMn, setcurrentItem }: any) {
  return (
    <Link
      href={`ad/${ad?.slug}`}
      key={index}
      className="cursor-pointer"
      passHref
    >
      <a>
        <div key={index} className="cursor-pointer border shadow-md rounded-md">
          <div className="h-40 md:h-44 lg:h-52 w-full relative">
            <Image
              layout="fill"
              src={ad?.picture}
              alt={ad?.name}
              placeholder="blur"
              blurDataURL="/assets/images/preloader/preloader-static6.png"
            />
          </div>
          <div className="p-2">
            <p className="font-normal text-gray-700 mb-2">
              {ad?.name?.slice(0, 30)}
            </p>
            <p className="font-bold text-green-500 mt-2">
              {ad?.currency} {ad?.price}
            </p>
          </div>
          <div className="p-3">
            <Button
              className=""
              danger
              loading={currentItem == ad.id}
              onClick={() => {
                if (confirm("Are you sure, you want to delete this Ad?")) {
                  setcurrentItem(ad.id);
                  deleteItemMn(`v1/ads/${ad.id}`);
                }
              }}
              // onClick={() => setLoadingToTrue(!loadingToTrue)}
            >
              <DeleteOutlined />
            </Button>
          </div>
        </div>
      </a>
    </Link>
  );
}

export default SingleAd;