"use client";
import { useState } from "react";
import Link from "next/link";

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header className="bg-blue-600 text-white p-4 shadow-md">
      <div className="container mx-auto flex justify-between items-center">
        {/* Logo */}
        <h1 className="text-xl font-bold">
          <Link href="/">🏠 Update Bharat</Link>
        </h1>

        {/* Desktop Nav */}
        <nav className="hidden md:flex space-x-6">
          <Link href="/" className="hover:underline">
            Home
          </Link>
          <Link href="/properties" className="hover:underline">
            Properties
          </Link>
          <Link href="/about" className="hover:underline">
            About
          </Link>
          <Link href="/contact" className="hover:underline">
            Contact
          </Link>
          <Link href="/account/add-property" className="hover:underline">
            List Property
          </Link>
        </nav>

        {/* Mobile Menu Button */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="md:hidden focus:outline-none"
        >
          {isOpen ? "✖" : "☰"}
        </button>
      </div>

      {/* Mobile Nav */}
      {isOpen && (
        <nav className="md:hidden mt-4 flex flex-col space-y-2 bg-blue-700 p-4 rounded-lg">
          <Link
            href="/"
            className="hover:underline"
            onClick={() => setIsOpen(false)}
          >
            Home
          </Link>
          <Link
            href="/properties"
            className="hover:underline"
            onClick={() => setIsOpen(false)}
          >
            Properties
          </Link>
          <Link
            href="/about"
            className="hover:underline"
            onClick={() => setIsOpen(false)}
          >
            About
          </Link>
          <Link
            href="/contact"
            className="hover:underline"
            onClick={() => setIsOpen(false)}
          >
            Contact
          </Link>
          <Link
            href="/account/add-property"
            className="hover:underline"
            onClick={() => setIsOpen(false)}
          >
            List Property
          </Link>
        </nav>
      )}
    </header>
  );
}
