import Link from 'next/link'
import { DirectoryModal } from "@/components/directory-modal";
import { Button } from '@/components/ui/button'
import { LayoutDashboard } from 'lucide-react'

export default function Header() {
  return (
    (<header
      className="sticky top-0 z-50 w-full border-b border-gray-800 bg-black/95 backdrop-blur supports-[backdrop-filter]:bg-black/60">
      <div className="container flex h-14 items-center">
        <div className="mr-4 hidden md:flex">
          <Link href="/" className="mr-6 flex items-center space-x-2">
            <img
              src="/litenet-logo.png"
              alt="LiteNet Logo"
              className="h-6 w-6" />
            <span className="hidden font-bold text-white sm:inline-block">LiteNet</span>
          </Link>
          <nav className="flex items-center space-x-6 text-sm font-medium">
            <Link href="/#features" className="text-gray-300 hover:text-white">
              Features
            </Link>
            <Link href="/#updates" className="text-gray-300 hover:text-white">
              Updates
            </Link>
            <Link href="/#team" className="text-gray-300 hover:text-white">
              Team
            </Link>
          </nav>
        </div>
        <div
          className="flex flex-1 items-center justify-between space-x-2 md:justify-end">

          <DirectoryModal />

          <Button
            variant="outline"
            className="border-gray-700 bg-gray-900 text-white hover:bg-gray-800"
            asChild>
            <a
              href="https://discord.litenet.tel"
              target="_blank"
              rel="noopener noreferrer">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="mr-2 h-4 w-4">
                <circle cx="9" cy="12" r="1" />
                <circle cx="15" cy="12" r="1" />
                <path d="M7.5 7.5c3.5-1 5.5-1 9 0" />
                <path d="M7 16.5c3.5 1 6.5 1 10 0" />
                <path
                  d="M15.5 17c0 1 1.5 3 2 3 1.5 0 2.833-1.667 3.5-3 .667-1.667.5-5.833-1.5-11.5-1.457-1.015-3-1.34-4.5-1.5l-1 2.5" />
                <path
                  d="M8.5 17c0 1-1.356 3-1.832 3-1.429 0-2.698-1.667-3.333-3-.635-1.667-.476-5.833 1.428-11.5C6.151 4.485 7.545 4.16 9 4l1 2.5" />
              </svg>
              Join Discord
            </a>
          </Button>
          <Button className="bg-blue-600 text-white hover:bg-blue-700" asChild>
            <Link href="/dashboard">
              <LayoutDashboard className="mr-2 h-4 w-4" />
              Dashboard
            </Link>
          </Button>
        </div>
      </div>
    </header>)
  );
}