import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";
import { authStorage } from "@/lib/authStorage";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    const status = authStorage.getStorageStatus();
    setShowWarning(!status.persistent);
  }, []);

  if (!showWarning) return null;

  return (
    <Alert variant="destructive" className="mb-4">
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>Storage Restricted</AlertTitle>
      <AlertDescription>
        Your browser is blocking session storage. You'll need to sign in again if you reload the page.
        To fix this, please enable cookies and local storage for this site.
      </AlertDescription>
    </Alert>
  );
}