import Image from "next/image";
import React from "react";
import { ImageConstant } from "../../../constant/ImageConstant";
import { Button } from "../ui/button";
import { useSession } from "next-auth/react";
import { walletData } from "./profile.type";
interface RefillProps {
  onRefillClick: () => void;
  walletData: walletData | null;
}
const RefillProfile: React.FC<RefillProps> = ({
  onRefillClick,
  walletData,
}) => {
  const { data: session } = useSession();

  return (
    <div className="grid grid-cols-1 md:grid-cols-12 gap-6 bg-[#1A1A1A] p-5 rounded-[12px] mb-5 mt-7 items-center">
      <div className="md:col-span-6">
        <div className="flex gap-6">
          <Image
            src={session?.user?.profile_pic || ImageConstant.Profile}
            alt="user-profile"
            width={80}
            height={80}
            className="rounded-full"
          />
          <div>
            <h2 className="text-[20px] text-white font-semibold">
              {session?.user?.name || "-"}
            </h2>
            <h5 className="text-[18px] text-white font-light">
              UID:{session?.user?.id?.split("-")?.[0].toUpperCase()}
            </h5>
            <h6 className="text-[18px] text-white font-light">
              {session?.user?.email ?? ""}
            </h6>
          </div>
        </div>
      </div>
      {/* Left section (col-md-8) */}
      <div className="md:col-span-6 flex md:justify-end">
        <div className="flex gap-5">
          <div>
            <div className="flex gap-2 ">
              <h5 className="text-white mb-2">My Wallet</h5>
              <h6 className="flex gap-3 text-[16px] font-semibold">
                <Image
                  src={ImageConstant.coin}
                  alt=""
                  width={20}
                  height={10}
                  className="w-auto h-[20px]"
                />{" "}
                {walletData
                  ? walletData?.free_coins + walletData?.purchased_coins
                  : 0}{" "}
              </h6>
            </div>
            <div className="flex  gap-5 text-sm text-gray-300">
              <div className="flex gap-3 justify-between">
                <span>Free Coins</span>
                <span className="font-medium flex gap-2">
                  <Image
                    src={ImageConstant.coin}
                    alt=""
                    width={20}
                    height={20}
                    className="w-auto h-[20px]"
                  />{" "}
                  {walletData?.free_coins ?? 0}
                </span>
              </div>

              <div className="flex gap-3  justify-between">
                <span>Purchased Coins</span>
                <span className="font-medium flex gap-2">
                  <Image
                    src={ImageConstant.coin}
                    alt=""
                    width={20}
                    height={20}
                    className="w-auto h-[20px]"
                  />{" "}
                  {walletData?.purchased_coins ?? 0}
                </span>
              </div>
            </div>
          </div>

          <Button
            onClick={onRefillClick}
            className={`border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-[14px] text-white cursor-pointer p-[24px_30px] hover:!bg-white flex items-center justify-center gap-2 `}
          >
            REFILL
          </Button>
        </div>
      </div>
    </div>
  );
};

export default RefillProfile;