"use client";

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

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

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

  return (
    <div
      className="mb-4 block w-full rounded-3xl border border-border-primary-light p-4 font-semibold"
      onClick={() => {
        if (item && actionHandler) 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="hidden w-full h-[1px] max-[350px]:flex dark:bg-white/30 bg-black/30"></div>
        <div className="flex flex-col items-end max-[350px]:w-full max-[350px]:flex-row max-[350px]:items-center max-[350px]:justify-between max-sm:items-center max-sm:text-[11px]">
          <span>{item?.createdAt}</span>
          <div className="mt-3 flex items-center gap-1 max-[350px]:mt-0">
            {mode === "sent" ? (
              <span className="text-[#008D0E]">
                {Number(item.amount).toLocaleString()} {t("settings.toman")}
              </span>
            ) : (
              <span className="text-neutral-500">
                {item.reply ? t("settings.gifts.replied") : t("settings.gifts.tapToReply")}
              </span>
            )}
          </div>
        </div>
      </div>
      {item.message ? (
        <p className="mt-3 rounded-2xl bg-neutral-100 p-3 text-xs font-normal text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
          {item.message}
        </p>
      ) : null}
      {item.reply ? (
        <p className="mt-2 rounded-2xl bg-sky-50 p-3 text-xs font-normal text-sky-700 dark:bg-sky-950/40 dark:text-sky-300">
          {t("settings.gifts.yourReply")}: {item.reply}
        </p>
      ) : null}
    </div>
  );
}

export default GiftItem;
