import { Link } from 'react-router-dom';

interface User {
  _id: string;
  email: string;
  displayName: string;
}

interface NavbarProps {
  user: User | null;
  onSignOut: () => void;
}

export default function Navbar({ user, onSignOut }: NavbarProps) {
  return (
    <nav className="bg-bg-secondary border-b border-border">
      <div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
        <Link to="/" className="text-xl font-semibold text-text">
          DTP Web App
        </Link>
        <div className="flex items-center gap-4">
          {user ? (
            <>
              <span className="text-text-muted">{user.displayName}</span>
              <button
                onClick={onSignOut}
                className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg transition-colors"
              >
                Sign Out
              </button>
            </>
          ) : (
            <>
              <Link
                to="/sign-in"
                className="px-4 py-2 text-text-muted hover:text-text transition-colors"
              >
                Sign In
              </Link>
              <Link
                to="/sign-up"
                className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg transition-colors"
              >
                Sign Up
              </Link>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}