"use client";

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

export default function PaySpacePost({
  type = "ironFan",
  status = 0,
  data = {},
  isCreator,
}) {
  return (
    <>
      {isCreator ? (
        <div
          className={`w-full flex flex-col px-2 py-2 my-2 rounded-md ${type === "ironFan" ? "bg-primary-500" : "bg-super-500"}`}
          
        >
          <div className="flex flex-row justify-between items-center">
            <div className="flex flex-row items-center">
              <Image
                src={
                  data.is_ironfan_visible === 1
                    ? "/icons/money_pink.png"
                    : "/icons/money_gold.png"
                }
                className="w-4 mr-1"
              />
              <span
                className={`text-base font-semibold ml-1 text-[${data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"}]`}
              >
                {data.price / 100}
              </span>
              <span
              className={`text-sm font-medium text-[${data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"}]`}
              
              >
                元
              </span>
            </div>
            <div className="flex flex-row items-center">
              <p
                className={`text-sm font-medium text-[${data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"}]`}
              >
                共{data.buyer_cnt}人购买
              </p>
              {/* <Icon
                type="ionicon"
                name="chevron-forward"
                size={16}
                color={data.is_ironfan_visible === 1 ? "#FF669E" : "#FFD685"}
              /> */}
            </div>
          </div>
          {data.is_ironfan_visible === 1 && (
            <p className="text-xs text-[#FFFFFF40] mt-1">
              空间内任意消费满{data.ironfanship_price / 100}元即可成为铁粉
            </p>
          )}
        </div>
      ) : (
        <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>
                  {data.is_ironfan_visible === 1
                    ? "铁粉免费查看"
                    : data.is_superfanship_enabled === 1
                    ? "超粉免费查看"
                    : "付费解锁"}
                </span>
              ) : (
                <span>
                  {data.is_ironfanship_unlocked === 1 &&
                    data.is_ironfan_visible === 1 &&
                    "已使用铁粉特权解锁"}
                  {data.is_superfanship_unlocked === 1 &&
                    data.is_ironfan_visible === 0 &&
                    "已使用超粉特权解锁"}
                  {data.is_superfanship_unlocked === 0 &&
                    data.is_ironfan_visible === 0 &&
                    "已付费解锁"}
                  {data.is_ironfanship_unlocked === 0 &&
                    data.is_ironfan_visible === 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>
      )}
    </>
  );
}