'use client';

import {useEffect, useState} from "react";

export default function InstallPrompt() {
    const [isIOS, setIsIOS] = useState(false);
    const [isStandalone, setIsStandalone] = useState(false);

    useEffect(() => {
        setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream);

        setIsStandalone(window.matchMedia('(display-mode: standalone)').matches);
    }, []);

    if (isStandalone) {
        return null; // Don't show install button if already installed
    }

    return <div className="absolute top-2 right-2 z-10">
        {isIOS && <p>
            To install this app on your iOS device, tap the share button
            <span role="img" aria-label="share icon">
                {' '}⎋{' '}
            </span>
            and then &quot;Add to Home Screen&quot;
            <span role="img" aria-label="plus icon">
                {' '}➕{' '}
            </span>.
        </p>}
    </div>;
}