import useCreatePackageOrder from "../../../hooks/features/packages/order/useCreatePackageOrder";
import { Package } from "../../../hooks/features/packages/usePackagesFetch";
import { useModal } from "../../../lib/modal-system/ModalContext";
import Button from "../../ui/Button";

export default function PackageCard({ item }: { item: Package }) {
  const { openModal } = useModal();
  const { handleCreatePackageOrder, loading } = useCreatePackageOrder();

  const handleBuy = async () => {
    try {
      const { uuid } = await handleCreatePackageOrder({
        packageId: item?.uuid ?? "",
      });
      openModal("BUY_CREDITS", {
        package: item,
        orderId: uuid,
      });
    } catch (error) {
      console.error("Error buying package:", error);
    }
  };

  return (
    <div className="rounded-xl p-4 glass-card-v2 2xl:p-6">
      <div className="mb-3 xl:mb-6 flex items-center justify-between gap-3 2xl:mb-9.5">
        <h3 className="font-body text-base font-bold text-heading 2xl:text-xl">
          {item.name}
        </h3>

        {/* {item. && (
          <span className="rounded-full bg-[#EFE6FD] px-2 py-1 font-body text-xs xl:text-base font-medium leading-5 text-link-1">
            Last Purchased
          </span>
        )} */}
      </div>

      <div className="flex items-end justify-between gap-3">
        <div>
          <p className="font-body text-xl font-bold text-link-1 2xl:text-28">
            ${item.price}
          </p>

          <p className="mt-0.5 font-body text-sm leading-6 text-text sm:text-lg">
            {item.credits} Credits
          </p>
        </div>

        <Button
          variant="white"
          buttonClassName="!shadow-none"
          onClick={handleBuy}
          BtnInnerclassName="!px-4 !py-3 !text-sm 2xl:!text-lg !text-link"
        >
          {/* {item.isLastPurchased ? "Buy Again" : "Buy"} */}
          Buy
        </Button>
      </div>
    </div>
  );
}