"use client";

import { Service } from "@/types/types";
import Image from "next/image";
import React from "react";
import { IMAGE_BASE_URL, buildStorageUrl } from "../BaseUrl";

interface ServiceItemProps {
  service: Service;
  onDelete?: (id: string) => void; // اضافه کردن prop برای حذف
}

const ServiceItem: React.FC<ServiceItemProps> = ({ service, onDelete }) => {
  const { id, title, originalPrice, discountPrice, image, discountPercentage,status } =
    service;

    console.log(status);
    

  return (
    <div className="relative border-b py-2 flex items-center justify-between min-w-[330px] w-full">
      {onDelete && (
        <button
          className="py-2 absolute -right-2 -top-2"
          onClick={() => onDelete(id)}
        >
          <Image
            width={24}
            height={24}
            src={"/images/icons/close-circle.svg"}
            alt={title}
          />
        </button>
      )}

      <div className="flex items-center w-full justify-center">
        {image ? (
          <Image
            width={50}
            height={50}
            src={
              image?.slice(0, 9) === "/services"
                ? IMAGE_BASE_URL + image
                : image
            }
            alt={title}
            className="min-w-[50px] min-h-[50px] rounded-lg"
          />
        ) : (
          <div className="min-w-[50px] min-h-[50px]"></div>
        )}
        <div className="flex items-end w-full  justify-between">
          <div className="mr-2 min-w-16">
            <h2 className="font-bold text-sm max-w-28 md:max-w-72 overflow-hidden text-ellipsis text-nowrap">
              {title}
            </h2>
            <div
              className={`text-gray-500 ${
                discountPercentage && discountPercentage !== 0 && "line-through"
              } text-xs md:text-sm`}
            >
              {Number(originalPrice).toLocaleString()} تومان
            </div>
          </div>
          {discountPercentage && discountPercentage !== 0 ? (
            <>
              <div className="font-semibold text-xs md:text-sm mr-4 min-w-16">
                {Number(discountPrice).toLocaleString()} تومان
              </div>
              <div className="text-xs md:text-sm bg-red-600 text-white w-10 h-7 flex items-center justify-center rounded-full pt-1 mr-2">
                {discountPercentage}%
              </div>
            </>
          ) : (
            ""
          )}
        </div>
      </div>
    </div>
  );
};

export default ServiceItem;
