import Image from "next/image";
import { ModeToggle } from "./ui/toggle-theme";
import { Button } from "./ui/button";
import Link from "next/link";

const imageStyle = {
  borderRadius: '30px',
  width: 'auto',
  height: '40px',
  paddingLeft: '20px',
  paddingRight: '20px',
};

export default function Nav() {
  return (
    <header>
      <nav>
        <ul className="flex items-center justify-between px-4">
          <li>
            <a
              className="pointer-events-none flex place-items-center gap-2 lg:pointer-events-auto"
              target="_blank"
              rel="noopener noreferrer">
              <Image
                src="/brand.svg"
                alt="Brand Logo"
                className="dark:invert"
                width={100}
                height={24}
                priority
              />
            </a>
          </li>
          <li className="flex-1 flex justify-center">
            
            <div
              style={{
                paddingLeft: '15px',
                paddingRight: '15px',
                paddingTop: '10px',
                paddingBottom: '10px',
                borderRadius: '99999px',
                borderWidth: '3px'
              }}
              className="flex items-center justify-center space-x-2 border-purple-600 backdrop-blur-xl"
            >
              <Link href="/"><Button style={imageStyle} className="font-bold backdrop-blur-xl dark:bg-purple-900 hover:bg-purple-50 dark:hover:bg-purple-700">Home</Button></Link>
              <Button style={imageStyle} className="font-bold backdrop-blur-xl dark:bg-purple-900 hover:bg-purple-50 dark:hover:bg-purple-700">About</Button>
            </div>
          </li>
          <li>
            <ModeToggle />
          </li>
        </ul>
      </nav>
    </header>
  );
}