"use client";

import React, { useRef, useState } from "react";
import { Image } from "antd-mobile";

export default function PaySpacePost({ type = "ironFan", status = 0,data={} }) {
  return (
    <div
      className={`rounded-md ${
        type === "ironFan" ? "bg-primary-500" : "bg-super-500"
      } px-2 py-2 my-2 text-sm`}
    >
      <div
        className={`flex justify-between items-center text-sm ${
          type === "ironFan" ? "text-primary" : "text-super"
        }`}
      >
        <div className="flex items-center">
          <Image
            width={18}
            height={18}
            placeholder=""
            className="mr-2"
            src={
              type === "ironFan"
                ? "/icons/money_pink.png"
                : "/icons/money_gold.png"
            }
          />
          <span className="font-bold">{data.price / 100}元</span>
        </div>
        <div className="flex items-center">
          {!data.is_zone_moment_unlocked ? (
            <span>
              {status === 1
                ? "已付费解锁"
                : `${type === "ironFan" ? "铁粉" : "超粉"}免费查看`}
            </span>
          ) : (
            <span>
              {data.is_ironfan_visible === 1
                ? "铁粉免费查看"
                : data.is_superfanship_enabled === 1
                ? "超粉免费查看"
                : "付费解锁"}
            </span>
          )}
          <Image
            height={14}
            placeholder=""
            className="ml-2"
            src={
              type === "ironFan" ? "/icons/pinklink.png" : "/icons/goldlink.png"
            }
          />
        </div>
      </div>
      {status === 0 && (
        <p
          className="text-xs mt-2"
          style={{ color: type === "ironFan" ? "#ff669e54" : "#FFD68554" }}
        >
          空间内任何消费满{data.ironfanship_price}元即可成为铁粉
        </p>
      )}
    </div>
  );
}