import Image from "next/image";
import Link from "next/link";
import { CreditBox } from "./CreditBox";
import { memo } from "react";
import { CreditSummary } from "../../../hooks/features/dashboard/useFetchCreditSummary";
import CustomLink from "../../ui/CustomLink";

const CreditsCard = memo(function CreditsCard({
  creditSummary,
}: {
  creditSummary: CreditSummary;
}) {
  return (
    <div className="rounded-2xl p-4 glass-card-v2 sm:p-5 xl:p-7.5">
      <div className="relative z-10">
        <div className="mb-4 xl:mb-6 flex items-center justify-between 2xl:mb-8">
          <h2 className="font-body text-lg md:text-xl font-bold text-heading 2xl:text-2xl">
            Credits
          </h2>

          <CustomLink
            href="/credit-history"
            className="h-8 w-8 xl:h-12.5 xl:w-12.5 rounded-full p-0.5 gradient1 header-shadow transition-all group hover:p-1.5"
          >
            <span className="flex h-full w-full items-center justify-center rounded-full bg-white">
              <div className="relative h-4.5 w-4.5 2xl:h-5.5 2xl:w-5.5">
                <Image
                  src="/images/credits-icon.svg"
                  alt="Credits"
                  fill
                  className="object-contain"
                />
              </div>
              {/* <Image
                src="/images/credits-icon.svg"
                alt="Credits"
                width={22}
                height={22}
              /> */}
            </span>
          </CustomLink>
        </div>

        <div className="grid gap-2 xl:gap-6 sm:grid-cols-3">
          <CreditBox
            value={creditSummary?.availableCredits}
            label="Available"
            color="text-[#00A35C]"
          />
          <CreditBox
            value={creditSummary?.totalCredits}
            label="Purchased"
            color="text-link-1"
          />
          <CreditBox
            value={creditSummary?.creditsSpent}
            label="Used"
            color="text-[#C93B3B]"
          />
        </div>
      </div>
    </div>
  );
});

CreditsCard.displayName = "CreditsCard";

export default CreditsCard;