import { Logo } from "./logo";
import { NavMenu } from "./nav-menu";
import { NavigationSheet } from "./navigation-sheet";
import { SiLinkedin, SiGithub, SiGitea } from "react-icons/si";

const Navbar04Page = () => {
  return (
    <nav className="top-6 inset-x-4 h-16 bg-background border dark:border-slate-700/70 max-w-screen-xl mx-auto rounded-full">
      <div className="h-full flex items-center justify-between mx-auto px-4">

        {/* Desktop Menu */}
        <NavMenu className="hidden md:block" />
        <div className="flex items-center gap-3">
          {/* Social Media Links */}
          <div className="flex items-center gap-3">
            <a href="https://www.linkedin.com/in/craig-macfadyen-9a2041197/" target="_blank" rel="noopener noreferrer">
              <SiLinkedin className="w-6 h-6 text-gray-700 dark:text-gray-300" />
            </a>
            <a href="https://github.com/cdmacfadyen" target="_blank" rel="noopener noreferrer">
              <SiGithub className="w-6 h-6 text-gray-700 dark:text-gray-300" />
            </a>
            <a href="https://gitea.craigmacfadyen.co.uk/" target="_blank" rel="noopener noreferrer">
              <SiGitea className="w-6 h-6 text-gray-700 dark:text-gray-300" />
            </a>
          </div>
          {/* <Button
            variant="outline"
            className="hidden sm:inline-flex rounded-full"
          >
            Sign In
          </Button> */}
          {/* Mobile Menu */}
          <div className="md:hidden">
            <NavigationSheet />
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar04Page;