musicland/src/components/MobileCoinBadge.js

import React, { useCallback, useMemo, useState } from "react";
import { Platform, Pressable, StyleSheet } from "react-native";
import CreditAmount from "./CreditAmount";
import CoinPackModal from "./modal/CoinPackModal";
import { useUser } from "../providers/UserDataProvider";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { openCoinPackModal } from "../utils/coinPackModal";

const MobileCoinBadge = ({
  style,
  textStyle,
  iconSize = 20,
  iconPosition = "left",
}) => {
  const { currentUID, currentUserData } = useUser() || {};
  const [isModalVisible, setModalVisible] = useState(false);

  const coinBalance = useMemo(() => {
    const value = currentUserData?.coins;
    if (typeof value === "number" && Number.isFinite(value)) {
      return value;
    }
    if (typeof value === "string") {
      const parsed = Number(value);
      if (Number.isFinite(parsed)) {
        return parsed;
      }
    }
    return 0;
  }, [currentUserData?.coins]);

  const handlePress = useCallback(() => {
    if (Platform.OS === "web") {
      openCoinPackModal();
      return;
    }
    setModalVisible(true);
  }, []);

  const handleClose = useCallback(() => {
    setModalVisible(false);
  }, []);

  if (!currentUID || Platform.OS === "web") {
    return null;
  }

  return (
    <>
      <Pressable
        onPress={handlePress}
        accessibilityRole="button"
        style={[styles.container, style]}
      >
        <CreditAmount
          value={coinBalance}
          style={styles.content}
          textStyle={[styles.text, textStyle]}
          iconSize={iconSize}
          iconPosition={iconPosition}
        />
      </Pressable>
      <CoinPackModal visible={isModalVisible} onClose={handleClose} />
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: "rgba(12, 14, 18, 0.72)",
    borderWidth: 1,
    borderColor: "rgba(255, 255, 255, 0.1)",
    flexShrink: 1,
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  text: {
    fontSize: 18,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
});

export default MobileCoinBadge;