"use client";

import React, { ReactNode, useState } from "react";
import Image from 'next/image';

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useAuth } from "@/contexts/AuthContext";
import { ChevronDown } from "lucide-react";

interface LayoutProps {
  children: ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const { user, logout } = useAuth();
  const router = useRouter();

  const [dropdownOpen, setDropdownOpen] = useState(false);

  const handleLogout = () => {
    logout();
    router.push("/"); // Next.js redirect
  };

  return (
    <div >
      {/* Navbar */}
      <header className="bg-white shadow fixed w-full z-10">
        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2" aria-label="Home">
      <Image
        src="/logo.png"
        alt="PraSowLabs"
        width={160}
        height={60}
        priority
        style={{ height: "auto" }}
      />
    </Link>

          {/* Desktop Navigation */}
          <nav className="space-x-6 hidden md:flex">
            <Link href="/" className="hover:text-indigo-600">
              Home
            </Link>
            <Link href="/optimize" className="hover:text-indigo-600">
              Image Optimizer
            </Link>
            <Link href="https://idea.prasowlabs.in/" className="hover:text-indigo-600">
              Thinkchive
            </Link>
            <Link href="/contact" className="hover:text-indigo-600">
              Contact
            </Link>
            <Link href="/pricing" className="hover:text-indigo-600">
              Pricing
            </Link>
          </nav>

          {/* Auth Section */}
          <div className="flex items-center space-x-4 relative">
            {user ? (
              <div className="relative">
                <button
                  onClick={() => setDropdownOpen((prev) => !prev)}
                  className="flex items-center space-x-1 text-gray-600 hover:text-indigo-600"
                >
                  <span>{user.name}</span>
                  <ChevronDown className="w-4 h-4" />
                </button>

                {/* Dropdown */}
                {dropdownOpen && (
                  <div className="absolute right-0 mt-2 w-40 bg-white border rounded-lg shadow-md">
                    <Link
                      href="/dashboard"
                      className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                      onClick={() => setDropdownOpen(false)}
                    >
                      Dashboard
                    </Link>
                    <button
                      onClick={handleLogout}
                      className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
                    >
                      Logout
                    </button>
                  </div>
                )}
              </div>
            ) : (
              <>
                <Link href="/login" className="text-gray-600 hover:text-indigo-600">
                  Login
                </Link>
                <Link
                  href="/signup"
                  className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"
                >
                  Sign Up
                </Link>
              </>
            )}
          </div>
        </div>
      </header>
    </div>
  );
};

export default Layout;