"use client";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { openRateModal } from "@/store/order";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/store/store";
import { OutlinedStarIcon } from "@/assets/svgs/Icons";
import { useTranslations } from "next-intl";

interface Props {
  isOrderComplete?: boolean;
  vendor:any;
  orderId:any;
}

const OrderTraderCard = ({vendor, isOrderComplete,orderId }: Props) => {
  
  const dispatch = useDispatch<AppDispatch>();
  const t = useTranslations();
  return (
    <div className="order-details-card flex items-center justify-between">
      <div className=" flex items-center gap-3">
        <ImageWithFallback
          src={vendor?.logo || ""}
          alt={vendor?.username}
          width={200}
          height={200}
          className="size-11 object-contain rounded-full"
        />
        <div className="flex flex-col gap-2  font-bold ">
          <span className="font-semibold">{t("Text.trader")}</span>
          {vendor?.company_name}
        </div>
      </div>
      {isOrderComplete && !vendor?.is_rated && (
        <div className="complete-order-btns">
          <button
            onClick={() => dispatch(openRateModal({isTrader:true,selectedItem:{...vendor,order_id:orderId}}))}
            className="text-primary px-3 !bg-secprimary"
          >
            {t("Text.rate")} <OutlinedStarIcon />
          </button>
        </div>
      )}
    </div>
  );
};


export default OrderTraderCard;