import React, {FC, useState} from "react";
import {useIsMobile} from "./hooks";
import {motion, AnimatePresence} from "motion/react";
import {__} from "../globals";

export type MobileBetaBadgeProps = {}

export const MobileBetaBadge: FC<MobileBetaBadgeProps> = ({}) => {
    const isMobile = useIsMobile()
    const [isDismissed, setIsDismissed] = useState(false)

    if (!isMobile || isDismissed) {
        return null
    }

    return (
        <AnimatePresence>
            <motion.div
                initial={{opacity: 0, y: 20, scale: 0.95}}
                animate={{opacity: 1, y: 0, scale: 1}}
                exit={{opacity: 0, y: 10, scale: 0.95}}
                transition={{
                    duration: 0.3,
                    ease: [0.21, 1.02, 0.73, 1]
                }}
                className="fixed bottom-20 left-1/2 z-[1000000001] flex items-center gap-2 px-4 py-2 rounded-full"
                style={{
                    transform: 'translateX(-50%)',
                    backgroundColor: 'rgba(55, 65, 81, 0.9)',
                    backdropFilter: 'blur(8px)',
                    WebkitBackdropFilter: 'blur(8px)',
                    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
                }}
            >
                <span className="text-white text-smaller-1 font-medium">{__('Mobile version is in beta')}</span>
                <button
                    onClick={() => setIsDismissed(true)}
                    className="flex items-center justify-center w-5 h-5 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition-colors"
                    aria-label="Dismiss"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-3 h-3 text-white">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </motion.div>
        </AnimatePresence>
    )
}