"use client";
import { NoticeRep } from "@/api/home";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { AnimatePresence, motion } from "framer-motion";
import { FC } from "react";

interface Props {
    notices: NoticeRep[];
}

const HomeMessage: FC<Props> = (props) => {
    const { sourceMap, setSourceMap, notices, hasValue } = useGlobalNoticeStore((state) => ({
        sourceMap: state.sourceMap,
        setSourceMap: state.setSourceMap,
        hasValue: state.hasValue,
        notices: state.notices,
    }));

    return (
        <>
            <AnimatePresence>
                {notices.map(
                    (item, index) =>
                        !item.is_read &&
                        !hasValue(item.id) &&
                        item.is_window !== 2 && (
                            <motion.div
                                key={index}
                                className={`absolute z-10 flex w-[100%] bg-[rgba(1,1,1,0.8)] px-[0.1389rem] py-[0.0333rem] text-[0.13rem]`}
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                                exit={{ opacity: 0 }}
                                transition={{ type: "spring" }}
                            >
                                <div className={"flex-1 break-all"}>{item?.content?.text}</div>
                                <div className={"h-[100%] flex-shrink-0"}>
                                    <i
                                        className={"iconfont icon-guanbi"}
                                        onClick={() => setSourceMap(item.id, item)}
                                    ></i>
                                </div>
                            </motion.div>
                        )
                )}
            </AnimatePresence>
        </>
    );
};

export default HomeMessage;
