import { Text } from "@tarojs/components";
import { Icon } from "@/components";
import { useState } from "react";
import Taro from "@tarojs/taro";

interface IPhoneProps {
  phone: string;
}

export default function Phone(props: IPhoneProps) {
  const { phone } = props;

  const [showFullPhone, setShowFullPhone] = useState(false);

  // 手机号脱敏函数
  const maskPhone = (phone?: string) => {
    if (!phone) return "";
    return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
  };

  return (
    <>
      <Text className={"text-right text-sm font-medium text-neutral-darkest"}>
        {showFullPhone ? phone : maskPhone(phone)}
      </Text>
      <Icon
        name={showFullPhone ? "eye" : "eye-slash"}
        size={16}
        onClick={(e) => {
          setShowFullPhone(!showFullPhone);
          e.stopPropagation();
        }}
      />
      <Icon
        name={"phone-flip"}
        size={16}
        onClick={(e) => {
          Taro.makePhoneCall({
            phoneNumber: phone,
          });
          e.stopPropagation();
        }}
      />
    </>
  );
}
