"use client";

import Link from "next/link";
import { useState } from "react";
import { MapPin, Menu, X } from "lucide-react";
import { SimpleThemeToggle } from "@/components/ui/theme-toggle";
import { Button } from "@/components/ui/button";

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <nav className="border-b bg-background">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          {/* Logo and Title */}
          <Link href="/" className="flex items-center space-x-2">
            <MapPin className="h-6 w-6 text-primary" />
            <span className="text-lg font-bold">Location Tracker</span>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-6">
            <Link
              href="/map"
              className="text-foreground/70 hover:text-foreground transition-colors"
            >
              Map
            </Link>
            <Link
              href="/track"
              className="text-foreground/70 hover:text-foreground transition-colors"
            >
              Track
            </Link>
            <Link
              href="/share"
              className="text-foreground/70 hover:text-foreground transition-colors"
            >
              Share
            </Link>
            <SimpleThemeToggle />
          </div>

          {/* Mobile Navigation Toggle */}
          <div className="flex items-center md:hidden">
            <div className="mr-2">
              <SimpleThemeToggle />
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleMenu}
            >
              {isMenuOpen ? (
                <X className="h-5 w-5" />
              ) : (
                <Menu className="h-5 w-5" />
              )}
              <span className="sr-only">Toggle menu</span>
            </Button>
          </div>
        </div>

        {/* Mobile Navigation Menu */}
        {isMenuOpen && (
          <div className="mt-2 py-2 border-t md:hidden">
            <div className="flex flex-col space-y-2">
              <Link
                href="/map"
                className="px-2 py-2 rounded-md hover:bg-accent transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Map
              </Link>
              <Link
                href="/track"
                className="px-2 py-2 rounded-md hover:bg-accent transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Track
              </Link>
              <Link
                href="/share"
                className="px-2 py-2 rounded-md hover:bg-accent transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Share
              </Link>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}