"use client";

import UserInfo from "@/components/main/UserInfo";
import { IOffers, IReceiver, ISender } from "@/types/types";
import React from "react";
import { useTranslation } from "react-i18next";

function counterpartyUser(
  item: IOffers,
  mode: "sent" | "received"
): ISender | IReceiver {
  return mode === "received" ? item.sender : item.receiver;
}

function OffersItem({
  item,
  actionHandler,
  mode = "sent",
}: {
  item: IOffers;
  actionHandler?: (item: IOffers) => void;
  mode?: "sent" | "received";
}) {
  const { t } = useTranslation("common");
  const user = counterpartyUser(item, mode);

  const statusLabel =
    item?.status == "accepted"
      ? t("settings.offers.statusAccepted")
      : item?.status == "rejected"
        ? t("settings.offers.statusRejected")
        : t("settings.offers.statusPending");

  return (
    <div
      className="mb-4 p-4 border rounded-3xl border-border-primary-light w-full block font-semibold "
      onClick={() => {
        if (item && actionHandler !== undefined) {
          actionHandler(item);
        }
      }}
    >
      <div className="flex w-full items-center justify-between max-[350px]:flex-col max-sm:gap-5">
        <UserInfo
          profile_image={user?.profile_image}
          user_level={user?.user_level}
          first_name={user?.first_name}
          last_name={user?.last_name}
          user_name={user?.user_name}
          is_verified={user?.verify_badge}
          userId={user?._id}
        />
        <div className="w-full h-[1px] max-[350px]:flex hidden dark:bg-white/30 bg-black/30"></div>
        <div className="flex max-[350px]:flex-row  max-[350px]:w-full max-[350px]:justify-between max-[350px]:items-center flex-col items-end max-sm:text-[11px] max-sm:items-center">
          <span> {item?.createdAt}</span>
          <div className="flex items-center gap-1 mt-3 max-[350px]:mt-0">
            <span>{t("settings.status")}: </span>
            <span
              className={`${
                item?.status == "accepted"
                  ? "text-[#008D0E]"
                  : item?.status === "rejected"
                  ? "text-[#BA4141]"
                  : "text-[#BFAF19]"
              } `}
            >
              {statusLabel}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default OffersItem;
