'use client';

import Link from 'next/link';
import ThemeToggle from "../ui/ThemeToggle";

export default function Navbar() {
  return (
    <header className="w-full py-4 border-b border-card-border bg-background">
      <div className="container flex items-center justify-between px-4 mx-auto">
        <div className="flex items-center space-x-4">
          <Link href="/" className="flex items-center space-x-2">
            <svg
              className="w-6 h-6 text-accent-blue"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
            </svg>
            <span className="text-xl font-bold text-foreground">ShortURL</span>
          </Link>
          <nav className="hidden space-x-4 md:flex">
            <Link
              href="/links"
              className="text-sm text-foreground hover:text-accent-blue transition-colors"
            >
              Links
            </Link>
            <Link
              href="/analytics"
              className="text-sm text-foreground hover:text-accent-blue transition-colors"
            >
              Analytics
            </Link>
          </nav>
        </div>
        <div className="flex items-center space-x-3">
          <ThemeToggle />
          <button className="p-2 text-sm text-foreground rounded-md gradient-border">
            Upgrade
          </button>
          <button className="p-2 text-sm text-foreground hover:text-accent-blue">
            <svg
              className="w-5 h-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10"></circle>
              <circle cx="12" cy="10" r="3"></circle>
              <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"></path>
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
}