"use client";

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

export default function PaySpacePost({
  type = "ironFan",
  price = "0.00",
  status = 0,
}) {
  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 text-super mb-2 text-${type === "ironFan" ? "primary" : "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">{price}元</span>
        </div>
        <div className="flex items-center">
          <span>{status === 1 ? "已付费解锁" : `${type === "ironFan"?'铁粉':'超粉'}免费查看`}</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" style={{color:type === "ironFan" ? "#ff669e54" : "#FFD68554"}}>
          空间内任何消费满399元即可成为铁粉
        </p>
      )}
    </div>
  );
}