"use client";

import React, { useState } from "react";
import { Mask, ProgressBar } from "antd-mobile";
export default function SeeTiefen({
  visible,
  closeMask,
  handleClick,
  ironFanProgress,
  expenditure,
  ironfanship_price
}) {

  return (
    <Mask visible={visible}>
      <div className="relative w-screen h-screen">
        <div className="w-full h-full" onClick={() => closeMask(false)}></div>
        <div className="absolute top-1/2 left-1/2 -ml-[35vw] -mt-[35vw] w-[70vw] h-max flex flex-col justify-center items-center p-4 bg-[#261e30] rounded-2xl pointer-events-auto">
          <p className="text-base text-left w-full">
            当前铁粉解锁进度：
            <span className="text-2xl font-bold text-primary">{ironFanProgress}%</span>
          </p>
          <ProgressBar
            percent={ironFanProgress}
            style={{
              "--fill-color": "#FF669E",
              "--track-color": "#FF669E50",
            }}
            className="w-full mt-2 mb-4"
          />
          <p className="text-sm text-[#FF669E] font-medium">{`${
              expenditure / 100
            } / ${ironfanship_price / 100}`}</p>
          <p className="text-left my-2 text-sm text-[#FFFFFF40]">
            空间内累计消费达到￥{ironfanship_price / 100}即可成为
            <span className="text-primary">铁粉</span>
            ，可查看所有铁粉专享内容哟，快来成为我的铁粉吧~
          </p>
          <div
            className="px-8 py-2 rounded-full flex items-center mt-2 bg-gradient-to-r from-[#FF668B] to-[#FF66F0]"
            onClick={handleClick}
          >
            <span className="text-base">查看铁粉专享内容</span>
          </div>
        </div>
      </div>
    </Mask>
  );
}