"use client";
import { WalletMaskIcon } from "@/assets/svgs/Icons";
import { RootState } from "@/store/store";
import { useTranslations } from "next-intl";
import React from "react";
import { useSelector } from "react-redux";
import PointsTabs from "./PointsTabs";

const PointsWrapper = () => {
  const t = useTranslations();
  const { wallet, full_name, balance } = useSelector((state: RootState) => state.ProfileConfig);
  return (
    <>
      <div
        data-aos="fade-up"
        className="bg-primary p-5 rounded-xl md:p-[30px] md:rounded-[20px] text-greynormal relative overflow-hidden lg:min-h-[240px]"
      >
        <h3 className="md:text-2xl font-bold">{full_name}</h3>
        <p className="mt-7 md:mt-14 mb-2">{t("Text.currentPoints")}</p>
        <div className="flex items-center justify-between z-[1] relative">
          <p className="text-2xl md:text-5xl flex items-center gap-2 font-bold">
            400
            <span className="text-sm md:text-base font-normal ">
              {t("Text.point")}
            </span>
          </p>
        </div>
        <WalletMaskIcon className="absolute h-full top-0 end-0 " />
      </div>
      <PointsTabs/>
    </>
  );
};


export default PointsWrapper;