"use client";
// import { Animated, Easing } from "react-native";
import React, { useState, useEffect } from "react";
import { Image, NoticeBar } from "antd-mobile";
export default function ScrollNotice({ content }) {
  // const [fadeAnim] = useState(new Animated.Value(300)); // 透明度初始值为0
  // let animation = Animated.timing(fadeAnim, {
  //   toValue: -(length * 60),
  //   duration: 4000,
  //   delay: 500,
  //   easing: Easing.linear,
  //   useNativeDriver: false,
  //   useNativeDriverForTransform: true, // 如果动画涉及transform属性，则需要此设置
  // });
  // useEffect(() => {
  //   return () => {
  //     animation && animation.stop();
  //     animation = null;
  //   };
  // }, []);

  // const runAnimation = () => {
  //   animation &&
  //     animation.start(() => {
  //       // 动画完成时的回调，重置动画值并再次运行动画以实现循环
  //       fadeAnim.setValue(length * 80); // 重置动画值（如果需要）
  //       runAnimation(); // 再次运行动画
  //     });
  // };

  // useEffect(() => {
  //   runAnimation(); // 组件挂载时开始动画
  //   // 注意：这里没有清理函数，因为动画是无限循环的。
  //   // 如果你需要在组件卸载时停止动画，你需要实现一个机制来跟踪组件的状态，并在适当时调用`stopAnimation`。
  // }, [fadeAnim]);
  return (
    <div className="bg-[#301024] border-2 border-[#FF518F26] px-4 py-3 rounded-xl flex-row">
      <NoticeBar
        icon={
          <Image
            width={14}
            height={14}
            className="rounded-full"
            src={
              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/32DP/notice.png"
            }
            fit="cover"
          />
        }
        bordered={false}
        content={content}
        style={{
          "--background-color": "transparent",
          "--height": "max-content",
          border: "none",
          padding: 0,
        }}
      />
      <div className="mr-2"></div>
    </div>
  );
}