import UserInfo from "@/components/main/UserInfo";
import { IOffers } from "@/types/types";
import React from "react";

function OffersItem({
  item,
  actionHandler,
}: {
  item: IOffers;
  actionHandler?: (item: IOffers) => void;
}) {
  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={item?.receiver?.profile_image}
          user_level={item?.receiver?.user_level}
          first_name={item?.receiver?.first_name}
          last_name={item?.receiver?.last_name}
          user_name={item?.receiver?.user_name}
          is_verified={item?.receiver?.is_verified}
        />
        <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>وضعیت: </span>
            <span
              className={`${
                item?.status == "accepted"
                  ? "text-[#008D0E]"
                  : item?.status === "rejected"
                  ? "text-[#BA4141]"
                  : "text-[#BFAF19]"
              } `}
            >
              {item?.status == "accepted"
                ? "تایید درخواست"
                : item?.status == "rejected"
                ? "رد درخواست"
                : "در انتظار تایید"}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default OffersItem;
