import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { ArrowLeftSmIcon } from "@/assets/svgs/Icons";
import LocalePath from "@/components/UiComponents/LocalePath";
import { useTranslations } from "next-intl";
import { Tag } from "antd";

interface Props{
    isOrders:boolean;
    order:any;
}

const OrderCard = ({ order , isOrders }:Props) => {
  const t = useTranslations();
  const status = isOrders ?  order?.status : order?.return_status;

  return (
    <div className="bg-white p-4 rounded-lg">
      <h5 className="text-gray-600 text-xs md:text-sm font-semibold">{t(isOrders ?"orders.order_number":"returns.return_number")}: <span className="">{order?.uuid}</span></h5>
      <div className="flex items-center gap-2 md:gap-4 mt-4">
        <ImageWithFallback
            src={(isOrders? order?.item?.image : order?.media[0]) ||""}
            width={80}
            height={80}
            alt={order?.item?.name}
            className="size-[85px] md:size-[100px] object-contain bg-greynormal rounded-lg"
            style={{ mixBlendMode: "multiply" }}
          />
        <div className="text-right flex-1 font-semibold space-y-1.5 md:space-y-3 ">
          <p className="text-gray-300 text-sm md:text-lg">{isOrders ?  order?.trader?.company_name : order?.seller?.company_name}</p>
          <p className="text-sm md:text-lg font-bold">{order?.item?.name || order?.name}</p>
          <div className="flex justify-between gap-4 items-center">
            <div>
              <Tag
                className="px-1.5 md:px-4 py-0.5 md:py-2 inline-block text-[10px] md:text-sm rounded-lg font-semibold"
                color={
                  status === "pending"
                    ? isOrders ? "orange" : "gray"
                    : status == "prepared"
                    ? "purple"
                    : status === "cancelled"
                    ? "red"
                    : status === "shipped"
                    ? "gold":"green"
                }
              >
                {t(`status.${status}`)}
              </Tag>
              {/* <span className={`${badgeClass} `}>{t(`status.${order?.return_status || order?.status}`)}</span> */}
              <p className="text-gray-500 text-[10px] md:text-sm mt-1.5">{order?.created_at}</p>
            </div>
            <LocalePath 
              href={isOrders ? `/account/orders/${order?.uuid}` : `/account/returns/${order?.uuid}`} 
              className="border border-platinum p-2 rounded-lg  flex items-center gap-1 md:gap-2.5 max-md:text-[10px]"
            >
              {order?.item?.quantity ? `+${order?.item?.quantity}` : t("buttons.more")}
              <ArrowLeftSmIcon/>
            </LocalePath>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OrderCard;