import {ServerOff} from "lucide-react";
import detectIncognito from "detectincognitojs";
import React, {useEffect, useState} from "react";
import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";

export function IncognitoStorageWarning() {
    const [showWarning, setShowWarning] = useState(false);

    useEffect(() => {
        const check = async () => {
            try {
                const {isPrivate} = await detectIncognito();
                setShowWarning(isPrivate);
            } catch {
                setShowWarning(false);
            }
        };

        check().catch(console.error);
    }, []);

    return (showWarning && (
        <Alert variant="destructive">
            <ServerOff className="h-4 w-4"/>
            <AlertTitle>Private Session Detected</AlertTitle>
            <AlertDescription>
                You&apos;re currently using a private browsing session. When you close the tab, all data (including
                cards) will be lost. Switch to a regular browsing session to ensure your data is saved.
            </AlertDescription>
        </Alert>
    ));
}