// src/Navbar.js
import React from 'react';

const Navbar = () => {
  return (
    <nav style={styles.navbar}>
      <div style={styles.logo}>My Navbar</div>
      <ul style={styles.navLinks}>
        <li style={styles.navLink}><a href="#home">Home</a></li>
        <li style={styles.navLink}><a href="#about">About</a></li>
        <li style={styles.navLink}><a href="#services">Services</a></li>
        <li style={styles.navLink}><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  );
};

const styles = {
  navbar: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '1rem 2rem',
    backgroundColor: '#333',
    color: 'white',
  },
  logo: {
    fontSize: '1.5rem',
  },
  navLinks: {
    listStyle: 'none',
    display: 'flex',
    margin: 0,
    padding: 0,
  },
  navLink: {
    marginLeft: '1rem',
  },
};

export default Navbar;