"use client";

import { useEffect } from "react";
import { clearAuthCookies } from "@/lib/session";
import Link from "next/link";

export default function LoggedOut() {
  // Clear auth cookies again on this page as an extra precaution
  useEffect(() => {
    // Run an additional cookie cleanup on this page
    clearAuthCookies();
    
    // Also clear session storage
    try {
      sessionStorage.clear();
    } catch (e) {
      console.error('Error clearing session storage:', e);
    }
  }, []);

  return (
    <div 
      className="min-h-screen flex items-center justify-center"
      style={{
        backgroundImage: "url('/signin.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}
    >
      <div className="w-full max-w-md p-8 bg-black/60 backdrop-blur-sm rounded-lg shadow-xl">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            You have been logged out
          </h2>
          <p className="text-white/80 mb-8">
            Your session has been successfully terminated and all authentication data has been cleared.
          </p>
          <Link 
            href="/signin"
            className="inline-block px-8 py-3 bg-white text-gray-800 rounded hover:bg-gray-100 transition-colors"
          >
            Sign In Again
          </Link>
        </div>
      </div>
    </div>
  );
}