import { useModal } from "../../../lib/modal-system/ModalContext";
import Button from "../../ui/Button";
import { PackageItem } from "./PackageBuySection";

export default function PackageCard({ item }: { item: PackageItem }) {
  const { openModal } = useModal();

  return (
    <div className="rounded-xl p-4 glass-card-v2 2xl:p-6">
      <div className="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.title}
        </h3>

        {item.isLastPurchased && (
          <span className="rounded-full bg-[#EFE6FD] px-2 py-1 font-body 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-[28px]">
            {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={() =>
            openModal("BUY_CREDITS", {
              package: item,
            })
          }
          BtnInnerclassName="!px-4 !py-3 !text-sm sm:!text-lg !text-link"
        >
          {item.isLastPurchased ? "Buy Again" : "Buy"}
        </Button>
      </div>
    </div>
  );
}