// components/Header.tsx
import React from 'react';
import Link from 'next/link';
import MyUserButton from './MyUserButton';

const Header: React.FC = () => {
  return (
    <header className="bg-gray-800 text-white p-4">
      <div className="container max-w-1920 mx-auto flex justify-between items-center">
        <h1 className="text-xl font-bold">
          <Link href="/">Scrap</Link>
        </h1>
        <nav>
          <ul className="flex space-x-4">
            <li>
              <Link href="/" className="hover:text-gray-400">
                Home
              </Link>
            </li>
            <li>
              <Link href="/about" className="hover:text-gray-400">
                About
              </Link>
            </li>
            <li>
              <Link href="/contact" className="hover:text-gray-400">
                Contact
              </Link>
            </li>
            <li>
              <MyUserButton />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
};

export default Header;